<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>停电告警demo</title>
    <link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
    <link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">

    <script type="text/javascript" src="../../lib/vue/vue.js"></script>
    <script type="text/javascript" src="../../lib/element-ui/index.js"></script>
    <script type="text/javascript" src="../../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../static/js/webApi.js"></script>
    <script type="text/javascript" src="../../static/js/tool.js"></script>
    <script src="../../static/js/jsencrypt.min.js"></script>
    <script src="../../static/js/web-control_1.2.5.min.js"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&type=webgl&ak=r8nxREP9jdrUUH19xYP3VAyL">
    </script>
    <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
    <script src="http://mapv.baidu.com/build/mapv.min.js"></script>
    <!-- <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.152/dist/mapvgl.min.js"></script> -->
    <script src="https://unpkg.com/mapvgl@1.0.0-beta.168/dist/mapvgl.min.js"></script>
    <script type="text/javascript" src="../../lib/echart/echarts.min.js"></script>
    <script src="https://unpkg.com/gcoord/dist/gcoord.global.prod.js"></script>

    <style type="text/css">
        /*
                找到html标签、body标签，和挂载的标签
                都给他们统一设置样式
            */
        html,
        body,
        #app {
            /*设置内部填充为0，几个布局元素之间没有间距*/
            padding: 0px;
            /*外部间距也是如此设置*/
            margin: 0px;
            /*统一设置高度为100%*/
            height: 100%;
            overflow: hidden;
        }

        #map_container {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        #top-container {
            position: absolute;
            top: 0px;
            width: 100%;
            background: linear-gradient(rgba(11, 49, 107, 0.9), rgba(11, 49, 107, 0.2));
            height: 90px;
            z-index: 100;
        }

        [v-cloak] {
            display: none;
        }

        .bg-layer {
            height: 100%;
            background: url("../../static/img/tdgj-title-bg-new.png") no-repeat center center;
            background-size: 100% 100%;
        }

        .top-title {
            color: #ffffff;
            font-size: 40px;
            text-align: center;
            font-weight: bold;
            letter-spacing: 10px;
            /* padding-top: 10px; */
            line-height: 66px;
        }

        .model {
            position: absolute;
            width: 25%;
            /* background: rgba(255, 255, 255, 0.7); */
            /* background: rgba(82, 125, 243, 0.14); */
            z-index: 100;
            display: none;
        }

        #left1 {
            height: 270px;
            top: 80px;
            left: 20px;
        }

        #left2 {
            height: calc(100% - 270px - 100px);
            top: calc(270px + 90px);
            left: 20px;
        }

        #right1 {
            height: 270px;
            top: 80px;
            right: 20px;
        }

        #right2 {
            height: 30%;
            top: calc(270px + 90px);
            right: 20px;
        }

        #right3 {
            height: calc(70% - 270px - 110px);
            top: calc(30% + 270px + 100px);
            right: 20px;
        }

        #yjleft1 {
            height: calc(100% - 100px);
            top: 80px;
            left: 20px;
            display: none;
        }

        #jkright1 {
            height: calc(100% - 100px);
            width: 50%;
            top: 80px;
            right: 20px;
            display: none;
            overflow: hidden;
        }

        /* #jkright2 {
            height: 340px;
            width: 500px;
            top: calc(320px + 90px);
            right: 20px;
        } */

        .model-title {
            /* margin: 10px 20px; */
            background: url("../../static/img/model-title-bg.png") no-repeat center center;
            background-size: 100% 100%;
            height: 48px;
        }

        .model-title-main {
            margin: 0 20px;
            color: #F2F4F7;
            line-height: 48px;
            font-size: 22px;
        }

        .model-title-sub {
            font-size: 16px;
            color: #686a6e;
        }

        .model-container {
            height: calc(100% - 58px);
            margin-top: 10px;
            background: rgba(82, 125, 243, 0.8);
        }

        .left1-content {
            overflow: hidden;
            height: 50%;
            vertical-align: middle;
            margin: 0 20px;
        }

        .left1-img-content {
            float: left;
            margin: 5px 20px;
        }

        .left1-img {
            vertical-align: middle;
        }

        .left1-target-content {
            float: left;
            margin: 10px;
        }

        .left1-target-title {
            font-size: 15px;
            color: #D5DFEA;
        }

        .left1-target-value {
            font-size: 36px;
            font-weight: bold;
            color: #ffffff;
        }

        .left2-content {
            margin: 10px;
            height: 100%;
            overflow: hidden;
        }

        .left2-thead {}

        .left2-tbody {
            height: calc(100% - 30px);
            overflow: auto;
        }

        .left2-table {
            width: 100%;
        }

        .left2-table tr th {
            font-size: 14px;
            color: #bdc6d1;
            line-height: 24px;
            font-weight: normal;
        }

        .left2-table tr td {
            font-size: 14px;
            color: #ffffff;
            text-align: center;
            line-height: 24px;
        }

        .tdsc-td {
            color: #FA9633 !important;
        }

        #jztdChart,
        #tdscfxChart,
        #lstdtjChart {
            width: 100%;
            height: 100%;
        }


        .coverlayer {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow: hidden;
            outline: 0;
            -webkit-overflow-scrolling: touch;
            background-color: rgb(0, 0, 0);
            filter: alpha(opacity=50);
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 990;
            display: none;
        }

        .video-div {
            background-color: #fff;
            border-radius: 3px;
            box-shadow: 0 0 3px 1px #e0e1e0;
            left: 50%;
            margin: -230px 0 0 -570px;
            position: fixed;
            top: 50%;
            width: 1150px;
            height: 460px;
            z-index: 1000;
            overflow: auto;
            display: none;
        }

        .detail-div {
            background-color: #fff;
            border-radius: 3px;
            box-shadow: 0 0 3px 1px #e0e1e0;
            left: 50%;
            margin: -150px 0 0 -150px;
            position: fixed;
            top: 50%;
            width: 460px;
            height: 330px;
            z-index: 1000;
            overflow: auto;
            display: none;
        }

        .tanchuang-title {
            font-size: 20px;
            margin: 10px;
            padding-bottom: 5px;
            color: #01c1de;
            border-bottom: 1px solid #d9d9d9;
        }

        .frame-close {
            position: absolute;
            right: 10px;
            top: 10px;
            width: 24px;
            height: 24px;
            background: url(../../static/img/login-tn.png) no-repeat 5px -44px;
            background-color: #fff;
            border-radius: 50%;
        }

        .frame-close:hover {
            background-color: #eeeeee;
        }

        .tanchuang-content {
            margin: 10px;
            overflow: auto;
        }

        .camera-list {
            float: left;
            width: 300px;
        }

        .infinite-list {
            list-style-type: none;
            overflow: auto;
            padding: 0 5px;
            margin: 0;
            height: 390px;
        }

        .infinite-list-item {
            margin: 5px 2px;
            border-bottom: 1px dashed #bbb;
            color: #000;
        }

        .infinite-list-item:hover {
            cursor: pointer;
            background-color: #F8A44F;
        }

        .camera-active {
            background-color: #F8A44F;
        }

        .playPanel {
            float: left;
            width: 800px;
            height: 390px;
            border: 1px solid red;
        }

        .playWnd {
            margin: 0;
        }

        .detail_table {
            width: 100%;
        }

        .detail_table tr th {
            text-align: right;
            color: #83868A;
            width: 120px;
        }

        .detail_table tr td {
            text-align: left;
        }

        .detail_table tr th,
        .detail_table tr td {
            font-size: 15px;
            font-weight: normal;
        }

        #Fullscreen {
            position: absolute;
            top: 22px;
            right: 20px;
            cursor: pointer;
            padding: 0;
            z-index: 1000;
        }

        #Fullscreen .imgbtn {
            width: 26px;
            height: 26px;
        }

        .a-btn{
            position: absolute;
            top: 22px;
            right: 60px;
            cursor: pointer;
            z-index: 1000;
            border: 2px solid #74bae5;
            color: #74bae5;
            border-radius: 5px;
            padding: 0px 8px;
            font-weight: bold;
        }

        .tdqk-content {}

        .tdqk-item {
            margin: 0px 10px;
            padding-top: 5px;
        }

        /* #jkright2 .tdqk-item {
            padding-top: 10px;
        } */

        .tdqk-item-content {
            overflow: hidden;
            background: rgb(0 126 251 / 28%);
            padding: 5px 10px;
        }

        /* #jkright2 .tdqk-item-content {
            padding: 10px 10px;
        } */

        .tdqk-item-order {
            float: left;
            width: 30px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            font-size: 16px;
            color: #ffffff;
        }

        .tdqk-item-name {
            float: left;
            line-height: 34px;
            margin-left: 10px;
            font-size: 16px;
            color: #ffffff;
        }

        .tdqk-item-value {
            float: right;
            line-height: 34px;
            font-size: 20px;
            color: #ffffff;
        }

        .tdqk-item-percent {
            float: right;
            line-height: 34px;
            font-size: 20px;
            color: #ffffff;
            width: 100px;
            text-align: right;
        }

        .tdqk-item-border {
            height: 2px;
            background-clip: padding-box;
            background-origin: padding-box;
            background-image: linear-gradient(to right, rgb(0 126 251 / 28%), #0083FF, rgb(0 126 251 / 28%));
        }

        .yjDetail {
            padding-top: 1px;
        }

        .yjDetail-row {
            overflow: hidden;
            margin: 20px 10px;
            border-bottom: 2px dashed #1248A7;
            padding-bottom: 2px;
        }

        .yjDetail-name {
            float: left;
            color: #ffffff;
            border: 1px solid #2850B3;
            /* background: #092A6F; */
            background: rgba(9, 42, 111, 0.7);
            width: 100px;
            line-height: 30px;
            text-align: center;
        }

        .yjDetail-value {
            float: left;
            color: #ffffff;
            width: calc(100% - 135px);
            line-height: 30px;
            text-align: left;
            margin-left: 20px;
        }

        .jkDetail {
            height: 100%;
        }

        div::-webkit-scrollbar {
            width: 4px;
        }

        div::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            opacity: 0.2;
            background: fade(@primary-color, 60%);
        }

        div::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 0;
            background: fade(@primary-color, 30%);
        }

        .BMap_cpyCtrl {
            display: none;
        }

        .anchorBL {
            display: none;
        }


        .slip_left_in_animation {
            animation: slip_left_in 1s;
        }

        .slip_left_out_animation {
            animation: slip_left_out 1s;
        }

        .slip_right_in_animation {
            animation: slip_right_in 1s;
        }

        .slip_right_out_animation {
            animation: slip_right_out 1s;
        }

        /*左侧滑入*/
        @keyframes slip_left_in {
            from {
                transform: translateX(-100%);
            }

            to {
                transform: translateX(0);
            }
        }

        /*左侧滑出*/
        @keyframes slip_left_out {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(-100%);
            }
        }

        /*右侧滑入*/
        @keyframes slip_right_in {
            from {
                transform: translateX(100%);
            }

            to {
                transform: translateX(0);
            }
        }

        /*右侧滑出*/
        @keyframes slip_right_out {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(100%);
            }
        }
    </style>
</head>

<body>
<div id="app" v-cloak>
    <div id="map_container">

    </div>

    <div id="top-container">
        <div class="bg-layer">
            <div class="top-title">
                西山供电局停电告警系统
            </div>
        </div>
    </div>
    <div id="left1" class="model common-model">
        <div class="model-title">
            <div class="model-title-main">
                数据统计
            </div>
        </div>
        <div class="model-container">
            <div class="left1-content">
                <div class="left1-img-content">
                    <img class="left1-img" src="../../static/img/tdgj-yj-new.png">
                </div>
                <div class="left1-target-content">
                    <div class="left1-target-title">预警总数</div>
                    <div class="left1-target-value">{{tongjiData.yjsum?tongjiData.yjsum:0}}</div>
                </div>
            </div>
            <div class="left1-content">
                <div class="left1-img-content">
                    <img class="left1-img" src="../../static/img/tdgj-jk-new.png">
                </div>
                <div class="left1-target-content">
                    <div class="left1-target-title">监控总数</div>
                    <div class="left1-target-value">{{tongjiData.jksum?tongjiData.jksum:0}}</div>
                </div>
            </div>
        </div>
    </div>
    <div id="left2" class="model common-model">
        <div class="model-title">
            <div class="model-title-main">
                停电预警记录
            </div>
        </div>
        <div class="model-container">
            <div class="left2-content">
                <div class="left2-thead">
                    <table class="left2-table">
                        <thead>
                        <tr>
                            <th style="width: 50px;">城市</th>
                            <th>变压器名称</th>
                            <th style="width: 80px;">停电时长</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="left2-tbody">
                    <table class="left2-table">
                        <tbody>
                        <tr v-for="item in tdyjRecord">
                            <td style="width: 50px;">{{item.city}}</td>
                            <td>{{item.tName}}</td>
                            <td class="tdsc-td" style="width: 80px;">{{item.tdsc}} h</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div id="right1" class="model common-model">
        <div class="model-title">
            <div class="model-title-main">
                片区停电数量及占比
            </div>
        </div>
        <div class="model-container">
            <!-- <div id="jztdChart">

            </div> -->
            <div class="tdqk-content">
                <div v-for="item in tdqkData" class="tdqk-item">
                    <div class="tdqk-item-content">
                        <div v-if="item.order<=3" class="tdqk-item-order"
                             :style="'background: url(../../static/img/polygon'+item.order+'.png) no-repeat center center;'">
                            {{item.order}}
                        </div>
                        <div v-else class="tdqk-item-order"
                             :style="'background: url(../../static/img/polygon3.png) no-repeat center center;'">
                            {{item.order}}
                        </div>
                        <div class="tdqk-item-name">
                            {{item.name}}
                        </div>
                        <div class="tdqk-item-percent">
                            {{item.percent}}
                        </div>
                        <div class="tdqk-item-value">
                            {{item.value}} 个
                        </div>
                    </div>
                    <div class="tdqk-item-border">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="right2" class="model common-model">
        <div class="model-title">
            <div class="model-title-main">
                停电时长分析
            </div>
        </div>
        <div class="model-container">
            <div id="tdscfxChart">

            </div>
        </div>
    </div>
    <div id="right3" class="model common-model">
        <div class="model-title">
            <div class="model-title-main">
                历史停电情况
            </div>
        </div>
        <div class="model-container">
            <div id="lstdtjChart">

            </div>
        </div>
    </div>

    <div id="yjleft1" class="model yj-model">
        <div class="model-title">
            <div v-if="yjDetail.flag=='是'" class="model-title-main">
                告警信息
            </div>
            <div v-else class="model-title-main">
                变压器信息
            </div>
        </div>
        <div class="model-container">
            <div class="yjDetail">
                <div class="yjDetail-row">
                    <div class="yjDetail-name">
                        变压器名称
                    </div>
                    <div class="yjDetail-value">
                        {{yjDetail.tName}}
                    </div>
                </div>
                <div class="yjDetail-row">
                    <div class="yjDetail-name">
                        变电站名称
                    </div>
                    <div class="yjDetail-value">
                        {{yjDetail.dzName}}
                    </div>
                </div>
                <div class="yjDetail-row">
                    <div class="yjDetail-name">
                        线路名称
                    </div>
                    <div class="yjDetail-value">
                        {{yjDetail.xlName}}
                    </div>
                </div>
                <div class="yjDetail-row">
                    <div class="yjDetail-name">
                        地址
                    </div>
                    <div class="yjDetail-value">
                        {{yjDetail.address}}
                    </div>
                </div>
                <div class="yjDetail-row">
                    <div class="yjDetail-name">
                        所属片区
                    </div>
                    <div class="yjDetail-value">
                        {{yjDetail.pq}}
                    </div>
                </div>
                <div class="yjDetail-row">
                    <div class="yjDetail-name">
                        状态
                    </div>
                    <div v-if="yjDetail.flag=='是'" class="yjDetail-value" style="color: #FE272D;">
                        停电
                    </div>
                    <div v-else class="yjDetail-value">
                        正常
                    </div>
                </div>
                <div v-if="yjDetail.flag=='是'" class="yjDetail-row">
                    <div class="yjDetail-name">
                        停电时间
                    </div>
                    <div class="yjDetail-value">
                        {{yjDetail.tdTime}}
                    </div>
                </div>
                <div v-if="yjDetail.flag=='是'" class="yjDetail-row">
                    <div class="yjDetail-name">
                        停电时长
                    </div>
                    <div class="yjDetail-value">
                        {{yjDetail.tdsc}}h
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="jkright1" class="model jk-model">
        <div class="model-title">
            <div class="model-title-main">
                监控内容
            </div>
        </div>
        <div class="model-container" id="jk-container">
            <div id="jkDetail" class="jkDetail">
                <div id="playWnd" class="playWnd"></div>
            </div>
        </div>
    </div>

    <!-- <div id="jkright2" class="model jk-model">
            <div class="model-title">
                <div class="model-title-main">
                    片区停电数量及占比
                </div>
            </div>
            <div class="model-container">
                <div class="tdqk-content">
                    <div v-for="item in tdqkData" class="tdqk-item">
                        <div class="tdqk-item-content">
                            <div v-if="item.order<=3" class="tdqk-item-order"
                                :style="'background: url(../../static/img/polygon'+item.order+'.png) no-repeat center center;'">
                                {{item.order}}
                            </div>
                            <div v-else class="tdqk-item-order"
                                :style="'background: url(../../static/img/polygon3.png) no-repeat center center;'">
                                {{item.order}}
                            </div>
                            <div class="tdqk-item-name">
                                {{item.name}}
                            </div>
                            <div class="tdqk-item-percent">
                                {{item.percent}}
                            </div>
                            <div class="tdqk-item-value">
                                {{item.value}} 个
                            </div>
                        </div>
                        <div class="tdqk-item-border">
                        </div>
                    </div>
                </div>
            </div>
        </div> -->

    <a href="javascript:fullScreen();" id="Fullscreen" data-val="true" title="全屏">
        <img id="fullimg" class="imgbtn" src="../../static/img/fullscreen.png" />
        <img id="exitfullimg" class="imgbtn" src="../../static/img/exitfullscreen.png" hidden="hidden" />
    </a>
    <a @click="showOrHide()" class="a-btn">
        {{buttonText}}
    </a>
</div>
</body>

<script type="text/javascript">
    var cameraIndexCode = "";
    var playWndWidth = 800;
    var playWndHeight = 400;

    //打开视频窗口
    function videoOpen() {
        $("#coverlayer").show();
        $("#video-div").show();

        //当前页面嵌入其他页面时，监控播放窗口位置有异常，所以做以下处理：
        //有父页面时，获取父页面距离浏览器顶部和左侧的距离，然后对视频位置div做位置偏移处理
        var parentIframeTop = 0;
        var parentIframeLeft = 0;
        if (window.parent != window.self) {
            parentIframeTop = window.parent.iframeTop();
            parentIframeLeft = window.parent.iframeLeft();
        }

        playWndWidth = $("#jk-container").width();
        playWndHeight = $("#jk-container").height();
        console.log(playWndWidth + ',' + playWndHeight);

        $("#playWnd").css("padding-left", parentIframeLeft + "px");
        $("#playWnd").css("padding-top", parentIframeTop + "px");



    }

    //关闭视频窗口
    function videoClose() {
        $("#video-div").hide();
        $("#coverlayer").hide();

        if (oWebControl != null) {
            oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
            oWebControl.JS_Disconnect().then(function () {}, function () {});
        }
    }

    //打开详情窗口
    function detailOpen() {
        $("#coverlayer").show();
        $("#detail-div").show();
    }
    //关闭详情窗口
    function detailClose() {
        $("#detail-div").hide();
        $("#coverlayer").hide();
    }

    function fullScreen() {
        var fullScree = $("#Fullscreen").attr("title");
        if (fullScree == "退出全屏") {
            if (window.parent == window.self) {
                exitFullscreenCur();
            } else {
                window.parent.exitFullscreen();
            }
            $("#Fullscreen").attr("title", "全屏");
            $("#fullimg").show();
            $("#exitfullimg").hide();
        } else {
            if (window.parent == window.self) {
                fullScreenCur();
            } else {
                window.parent.fullScreen("iframe0");
            }
            $("#Fullscreen").attr("title", "退出全屏");
            $("#fullimg").hide();
            $("#exitfullimg").show();
        }
    }

    //全屏
    function fullScreenCur() {
        //var element = document.getElementById("body");
        var element = document.documentElement;
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        }
    }

    function isFullscreenCur() {
        return document.fullscreenElement ||
            document.msFullscreenElement ||
            document.mozFullScreenElement ||
            document.webkitFullscreenElement || null;
    }

    //退出全屏
    function exitFullscreenCur() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }


    // 插件对象实例，初始化为null，需要创建多个插件窗口时，需要定义多个插件对象实例变量，各个变量唯一标志对应的插件实例
    var oWebControl = null;
    var bIE = (!!window.ActiveXObject || 'ActiveXObject' in window); // 是否为IE浏览器
    var pubKey = ''; // demo中未使用加密，可根据需求参照开发指南自行使用加密功能
    var initCount = 0; // 异常重启计数
    var iframePos = {}; // iframe相对文档的位置
    var parentTitle = ''; // 父页面标题
    var iframeClientPos = null; // iframe相对视窗的位置
    var iframeParentShowSize = null; // 视窗大小 width height  	


    // 步骤1：监听父页面的消息
    window.addEventListener('message', function (e) {
        if (e && e.data) {
            switch (e.data.action) {
                case 'sendTitle': // 父页面将其标题发送过来，子页面保存该标题，以便创建插件窗口成功后将标题设置回给父页面
                    parentTitle = e.data.info;
                    break;
                case 'updatePos': // 更新插件位置：JS_CreateWnd时需要父页面计算滚动条偏移量，初始偏移量叠加该偏移量作为iframe的偏移量，防止插件窗口与DIV窗口初始不贴合情况
                    var scrollValue = e.data.scrollValue; // 滚动条滚动偏移量
                    oWebControl.JS_SetDocOffset({
                        left: iframePos.left + scrollValue.left,
                        top: iframePos.top + scrollValue.top
                    }); // 更新插件窗口位置

                    oWebControl.JS_Resize(500, 250);
                    setWndCover();
                    break;
                case 'updateInitParam':
                    iframePos = e.data.iframeOffset; // iframe与文档的偏移量
                    iframeClientPos = e.data.iframeClientPos; // iframe相对视窗的位置
                    iframeParentShowSize = e.data.showSize; // 视窗大小
                    break;
                case 'resize':
                    iframeParentShowSize = e.data.showSize; // 视窗大小
                    iframePos = e.data.iframeOffset; // iframe与文档的偏移量
                    iframeClientPos = e.data.iframeClientPos; // iframe相对视窗的位置
                    setWndCover();
                    break;
                case 'scroll':
                    iframeParentShowSize = e.data.showSize; // 视窗大小
                    iframePos = e.data.iframeOffset; // iframe与文档的偏移量
                    iframeClientPos = e.data.iframeClientPos; // iframe相对视窗的位置				
                    var scrollValue = e.data.scrollValue; // 滚动条滚动偏移量
                    if (oWebControl) {
                        oWebControl.JS_SetDocOffset({
                            left: iframePos.left + scrollValue.left,
                            top: iframePos.top + scrollValue.top
                        }); // 更新插件窗口位置
                        oWebControl.JS_Resize(500, 250);
                        setWndCover();
                    }
                    break;
                default:
                    break;
            }
        }
    });

    // 顶部：iframe.getBoundingClientRect().top小于0并且其绝对值超过DIV.get(0).getBoundingClientRect().top部分需要剪切
    // 底部：(iframe.getBoundingClientRect().bottom - iframe父窗口可视域高度，为H1)为不可见部分
    //       ($(window).height() - DIV.get(0).getBoundingClientRect().bottom)
    //        为DIV底部与其所在iframe底部之间的距离H2，H1-H2的值大于0则表示DIV有部分在不可见区域
    // 左边：iframe.getBoundingClientRect().left小于0并且其绝对值超过DIV.get(0).getBoundingClientRect().left部分需要剪切
    // 右边：(iframe宽度 - DIV.get(0).getBoundingClientRect().right表示DIV右边与其父iframe右边之间的距离，为W1)
    //       (iframe父窗口可视域宽度-iframe.getBoundingClientRect().left表示iframe左边与iframe父窗口可视域右边之间的距离，为W2)
    //       (iframe宽度 - W2 - W1)如果大于0，则表示DIV右边超出了iframe父窗口可视域，需要剪切超过的部分
    function setWndCover() {
        if (oWebControl) {
            // 准备要用到的一些数据
            var iframeWndHeight = $(window).height(); // iframe窗口高度
            var iframeWndWidth = $(window).width(); // iframe窗口宽度
            var divLeft = $("#playWnd").get(0).getBoundingClientRect().left;
            var divTop = $("#playWnd").get(0).getBoundingClientRect().top;
            var divRight = $("#playWnd").get(0).getBoundingClientRect().right;
            var divBottom = $("#playWnd").get(0).getBoundingClientRect().bottom;
            var divWidth = $("#playWnd").width();
            var divHeight = $("#playWnd").height();

            oWebControl.JS_RepairPartWindow(0, 0, 501, 251); // 多1个像素点防止还原后边界缺失一个像素条

            // 判断剪切矩形的上边距        
            if (iframeClientPos.top < 0 && Math.abs(iframeClientPos.top) > divTop) {
                var deltaTop = Math.abs(iframeClientPos.top) - divTop;
                oWebControl.JS_CuttingPartWindow(0, 0, 501, deltaTop + 1);
                //console.log({deltaTop: deltaTop});
            }

            // 判断剪切矩形的左边距
            if (iframeClientPos.left < 0 && Math.abs(iframeClientPos.left) > divLeft) {
                var deltaLeft = Math.abs(iframeClientPos.left) - divLeft;
                //console.log({deltaLeft: deltaLeft});
                oWebControl.JS_CuttingPartWindow(0, 0, deltaLeft, 251); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
            }

            // 判断剪切矩形的右边距
            var W1 = iframeWndWidth - divRight;
            var W2 = iframeParentShowSize.width - iframeClientPos.left;
            if (W2 < divWidth) {
                var deltaRight = iframeWndWidth - W2 - W1;
                if (deltaRight > 0) {
                    oWebControl.JS_CuttingPartWindow(500 - deltaRight, 0, deltaRight + 1, 251);
                }
            }

            // 判断剪切矩形的下边距
            var H1 = iframeClientPos.bottom - iframeParentShowSize.height;
            var H2 = iframeWndHeight - divBottom;
            var deltaBottom = H1 - H2;
            //console.log({deltaBottom: deltaBottom});		
            if (deltaBottom > 0) {
                oWebControl.JS_CuttingPartWindow(0, 250 - deltaBottom, 501, deltaBottom + 1);
            }
        }
    }

    // 创建插件实例，并启动本地服务建立websocket连接，创建插件窗口
    function initPlugin() {
        oWebControl = new WebControl({
            szPluginContainer: "playWnd",
            iServicePortStart: 15900,
            iServicePortEnd: 15900,
            szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
            cbConnectSuccess: function () {
                initCount = 0;
                setCallbacks();
                oWebControl.JS_StartService("window", {
                    dllPath: "./VideoPluginConnect.dll"
                }).then(function () {
                    // 步骤2：JS_CreateWnd时指定cbSetDocTitle回调，并在回调中向父页面发送更新标题消息，标题为回调出来的uuid
                    oWebControl.JS_CreateWnd("playWnd", playWndWidth, playWndHeight, {
                        bEmbed: true,
                        cbSetDocTitle: function (uuid) {
                            oWebControl._pendBg = false;
                            window.parent.postMessage({
                                action: 'updateTitle',
                                msg: '子页面通知父页面修改title',
                                info: uuid
                            }, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
                        }
                    }).then(function () {
                        // oWebControl.JS_SetDocOffset({
                        //     left: 100,
                        //     top: 100
                        // });

                        // 步骤3：JS_CreateWnd成功后通知父页面将其标题修改回去
                        console.log("JS_CreateWnd success");
                        window.parent.postMessage({
                            action: 'updateTitle',
                            msg: '子页面通知父页面更新title',
                            info: parentTitle
                        }, '\*');

                        // 步骤4：发消息更新插件窗口位置：这里不直接更新的原因是，父页面默认可能就存在滚动条，此时有滚动量
                        window.parent.postMessage({
                            action: 'updatePos',
                            msg: '更新Pos'
                        }, '\*');

                        initCamera();
                    });
                }, function () {
                    console.log("JS_CreateWnd fail");
                });
            },
            cbConnectError: function () {
                console.log("cbConnectError");
                oWebControl = null;
                $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
                WebControl.JS_WakeUp("VideoWebPlugin://");
                initCount++;
                if (initCount < 3) {
                    setTimeout(function () {
                        initPlugin();
                    }, 3000)
                } else {
                    $("#playWnd").html("插件启动失败，请检查插件是否安装！");
                }
            },
            cbConnectClose: function (bNormalClose) {
                // 异常断开：bNormalClose = false
                // JS_Disconnect正常断开：bNormalClose = true
                if (true == bNormalClose) {
                    console.log("cbConnectClose normal");
                } else {
                    console.log("cbConnectClose exception");
                }

                oWebControl = null;
                $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
                WebControl.JS_WakeUp("VideoWebPlugin://");
                // initCount++;
                // if (initCount < 3) {
                //     setTimeout(function () {
                //         initPlugin();
                //     }, 3000)
                // } else {
                //     $("#playWnd").html("插件启动失败，请检查插件是否安装！");
                // }
            }
        });
    }

    // 获取公钥
    function getPubKey(callback) {
        oWebControl.JS_RequestInterface({
            funcName: "getRSAPubKey",
            argument: JSON.stringify({
                keyLength: 1024
            })
        }).then(function (oData) {
            console.log(oData)
            if (oData.responseMsg.data) {
                pubKey = oData.responseMsg.data
                callback()
            }
        })
    }

    // 设置窗口控制回调
    function setCallbacks() {
        oWebControl.JS_SetWindowControlCallback({
            cbIntegrationCallBack: cbIntegrationCallBack
        });
    }

    // 推送消息
    function cbIntegrationCallBack(oData) {
        console.log(JSON.stringify(oData.responseMsg));
    }

    // RSA加密
    function setEncrypt(value) {
        var encrypt = new JSEncrypt();
        encrypt.setPublicKey(pubKey);
        return encrypt.encrypt(value);
    }

    function requestInterface(value) {
        oWebControl.JS_RequestInterface(JSON.parse(value)).then(function (oData) {
            console.log(JSON.stringify(oData ? oData.responseMsg : ''))
        });
    }

    function initCamera() {
        var param = {
            "argument": {
                "appkey": "28937735",
                "ip": "vislink.cn",
                "port": 1443,
                "secret": "unQPggT3JjX5rm3MG7Hh",
                "enableHTTPS": 1,
                "layout": "1x1",
                "playMode": 0
            },
            "funcName": "init"
        };

        param = JSON.stringify(param);

        // 执行初始化
        oWebControl.JS_RequestInterface(JSON.parse(param)).then(function (oData) {
            console.log(oData);
            if (oData) {
                if (oData.responseMsg.code == 0) {
                    console.log("初始化成功");
                    doPlay();
                }
            }
        });
    }

    function doPlay() {
        var param = {
            "argument": {
                "cameraIndexCode": cameraIndexCode, //"9e995e97de954b73aaca0285fb7bfc69",
                "ezvizDirect": 0,
                "gpuMode": 0,
                "streamMode": 0,
                "transMode": 1,
                "wndId": -1
            },
            "funcName": "startPreview"
        };

        param = JSON.stringify(param);

        // 执行预览
        requestInterface(param);
    }

    // 格式化时间
    function dateFormat(oDate, fmt) {
        var o = {
            "M+": oDate.getMonth() + 1, //月份
            "d+": oDate.getDate(), //日
            "h+": oDate.getHours(), //小时
            "m+": oDate.getMinutes(), //分
            "s+": oDate.getSeconds(), //秒
            "q+": Math.floor((oDate.getMonth() + 3) / 3), //季度
            "S": oDate.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (oDate.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k])
                    .length)));
            }
        }
        return fmt;
    }

    window.onload = function () {
        if (oWebControl != null) {
            oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
            oWebControl.JS_Disconnect().then(function () {}, function () {});
        }


        let main = {
            data() {
                return {
                    cityMapCenter: {
                        "昆明": {
                            "center": [102.838967, 24.888462],
                            "zoom": 11
                        },
                        "五华": {
                            "center": [102.713492, 25.050163],
                            "zoom": 13
                        },
                        "盘龙": {
                            "center": [102.758335, 25.121896],
                            "zoom": 13
                        },
                        "官渡": {
                            "center": [102.751149, 25.022401],
                            "zoom": 13
                        },
                        "西山": {
                            //"center": [102.671236, 25.043354],
                            // "center": [102.583597, 24.961722],
                            "center": [102.667597, 24.995622],
                            "zoom": 14
                        }
                    },

                    CityCount: null,
                    tongjiData: {
                        yjsum: null,
                        jksum: null,
                    },
                    cityCameraData: [],
                    cameraList: [],
                    tdyjRecord: [],
                    byqYjPoints: [],
                    byqZcPoints: [],
                    yjDetail: {},
                    ykDetail: {},

                    map: null, //地图实例
                    view: null, //MapVGL图层管理器
                    initMapCenter: [],

                    mapJson: [{
                        name: "海口、团结片区",
                        //center: [102.631181, 25.020910],
                        center: [102.633506, 25.028696],
                        coordinates: [{
                            "lat": 24.943820439897706,
                            "lng": 102.65055633639088
                        },
                            {
                                "lat": 24.945818970488283,
                                "lng": 102.65028684473798
                            },
                            {
                                "lat": 24.94824337342118,
                                "lng": 102.65068209916224
                            },
                            {
                                "lat": 24.950061643953998,
                                "lng": 102.65046650583992
                            },
                            {
                                "lat": 24.952879090619074,
                                "lng": 102.65073599749282
                            },
                            {
                                "lat": 24.955745611898084,
                                "lng": 102.65048447195011
                            },
                            {
                                "lat": 24.957760326471313,
                                "lng": 102.64989159031371
                            },
                            {
                                "lat": 24.95936552234979,
                                "lng": 102.64915497979578
                            },
                            {
                                "lat": 24.96018449168513,
                                "lng": 102.64892142036327
                            },
                            {
                                "lat": 24.96239568137066,
                                "lng": 102.64865192871036
                            },
                            {
                                "lat": 24.963820648996144,
                                "lng": 102.64782548764146
                            },
                            {
                                "lat": 24.965196463977854,
                                "lng": 102.64622650383421
                            },
                            {
                                "lat": 24.966768804913617,
                                "lng": 102.64601091051189
                            },
                            {
                                "lat": 24.967931668996556,
                                "lng": 102.64696311435216
                            },
                            {
                                "lat": 24.969176412603318,
                                "lng": 102.6480051487434
                            },
                            {
                                "lat": 24.97030649774542,
                                "lng": 102.64696311435216
                            },
                            {
                                "lat": 24.970863347433795,
                                "lng": 102.6451665033328
                            },
                            {
                                "lat": 24.971633106042134,
                                "lng": 102.64541802887551
                            },
                            {
                                "lat": 24.972402859780743,
                                "lng": 102.64590311385074
                            },
                            {
                                "lat": 24.973401894605225,
                                "lng": 102.64531023221434
                            },
                            {
                                "lat": 24.97454831790223,
                                "lng": 102.64507667278183
                            },
                            {
                                "lat": 24.975891257167667,
                                "lng": 102.64556175775705
                            },
                            {
                                "lat": 24.976886169075744,
                                "lng": 102.64515302875014
                            },
                            {
                                "lat": 24.977750057177527,
                                "lng": 102.64531921526944
                            },
                            {
                                "lat": 24.978163574903334,
                                "lng": 102.64463201155453
                            },
                            {
                                "lat": 24.978921004715794,
                                "lng": 102.64425921476801
                            },
                            {
                                "lat": 24.978740859674367,
                                "lng": 102.64335641773079
                            },
                            {
                                "lat": 24.979129808861778,
                                "lng": 102.64230540028446
                            },
                            {
                                "lat": 24.97969071234196,
                                "lng": 102.64174395934091
                            },
                            {
                                "lat": 24.981762348031577,
                                "lng": 102.64067497578439
                            },
                            {
                                "lat": 24.98296191541119,
                                "lng": 102.63988895846342
                            },
                            {
                                "lat": 24.983641528539344,
                                "lng": 102.63957904306258
                            },
                            {
                                "lat": 24.98415737693244,
                                "lng": 102.63894573767826
                            },
                            {
                                "lat": 24.984501274645506,
                                "lng": 102.63828099160109
                            },
                            {
                                "lat": 24.985541149908855,
                                "lng": 102.63722548262722
                            },
                            {
                                "lat": 24.986224842579098,
                                "lng": 102.63661912640818
                            },
                            {
                                "lat": 24.98674068001347,
                                "lng": 102.6364080246134
                            },
                            {
                                "lat": 24.987043631137443,
                                "lng": 102.63592293963818
                            },
                            {
                                "lat": 24.987543089450543,
                                "lng": 102.63577921075662
                            },
                            {
                                "lat": 24.98797704336834,
                                "lng": 102.63581514297701
                            },
                            {
                                "lat": 24.98839052632073,
                                "lng": 102.63559505812714
                            },
                            {
                                "lat": 24.988689379460357,
                                "lng": 102.63519082064778
                            },
                            {
                                "lat": 24.988730318189397,
                                "lng": 102.63453056609816
                            },
                            {
                                "lat": 24.989135610863155,
                                "lng": 102.63384336238326
                            },
                            {
                                "lat": 24.989921629167302,
                                "lng": 102.63341666726616
                            },
                            {
                                "lat": 24.990298261137116,
                                "lng": 102.63370861655682
                            },
                            {
                                "lat": 24.99076495565493,
                                "lng": 102.63419370153204
                            },
                            {
                                "lat": 24.99100239603776,
                                "lng": 102.63456649831856
                            },
                            {
                                "lat": 24.991411774919086,
                                "lng": 102.63482700691637
                            },
                            {
                                "lat": 24.99141996248265,
                                "lng": 102.63555912590675
                            },
                            {
                                "lat": 24.991379024659306,
                                "lng": 102.63647539752662
                            },
                            {
                                "lat": 24.99157961986194,
                                "lng": 102.63687065195089
                            },
                            {
                                "lat": 24.99214046591689,
                                "lng": 102.63692904180903
                            },
                            {
                                "lat": 24.993004245655328,
                                "lng": 102.63690658417127
                            },
                            {
                                "lat": 24.99408498511985,
                                "lng": 102.63685717736824
                            },
                            {
                                "lat": 24.99418732737412,
                                "lng": 102.63736471998122
                            },
                            {
                                "lat": 24.994199608438837,
                                "lng": 102.63842921201018
                            },
                            {
                                "lat": 24.992865058813738,
                                "lng": 102.63900412753638
                            },
                            {
                                "lat": 24.992766809182537,
                                "lng": 102.63932302599233
                            },
                            {
                                "lat": 24.99314343233755,
                                "lng": 102.6397946363849
                            },
                            {
                                "lat": 24.993540522878533,
                                "lng": 102.63986200929813
                            },
                            {
                                "lat": 24.9941832336856,
                                "lng": 102.64045938246207
                            },
                            {
                                "lat": 24.995124778413476,
                                "lng": 102.64018539928162
                            },
                            {
                                "lat": 24.99618912454062,
                                "lng": 102.63972726347167
                            },
                            {
                                "lat": 24.997306677942785,
                                "lng": 102.63883344948954
                            },
                            {
                                "lat": 24.998469250063444,
                                "lng": 102.63860887311212
                            },
                            {
                                "lat": 24.99921836634778,
                                "lng": 102.63854599172645
                            },
                            {
                                "lat": 24.999500818829933,
                                "lng": 102.63883344948954
                            },
                            {
                                "lat": 24.999832392645203,
                                "lng": 102.63886938170992
                            },
                            {
                                "lat": 25.000086189275248,
                                "lng": 102.64000573817968
                            },
                            {
                                "lat": 25.000675650370713,
                                "lng": 102.64002370428987
                            },
                            {
                                "lat": 25.00091716485487,
                                "lng": 102.6392376869689
                            },
                            {
                                "lat": 25.001392005491848,
                                "lng": 102.63958353459013
                            },
                            {
                                "lat": 25.002153384019458,
                                "lng": 102.6400910772031
                            },
                            {
                                "lat": 25.002333494371218,
                                "lng": 102.63974522958188
                            },
                            {
                                "lat": 25.002677340665013,
                                "lng": 102.63959700917277
                            },
                            {
                                "lat": 25.002865637032624,
                                "lng": 102.63873912741103
                            },
                            {
                                "lat": 25.00355332563529,
                                "lng": 102.6389592122609
                            },
                            {
                                "lat": 25.00369250023607,
                                "lng": 102.63878404268651
                            },
                            {
                                "lat": 25.00415504996971,
                                "lng": 102.63870768671819
                            },
                            {
                                "lat": 25.004543917852253,
                                "lng": 102.63866726297026
                            },
                            {
                                "lat": 25.003905355199482,
                                "lng": 102.63848311034077
                            },
                            {
                                "lat": 25.003684313499257,
                                "lng": 102.63787675412173
                            },
                            {
                                "lat": 25.004548011191762,
                                "lng": 102.63780039815342
                            },
                            {
                                "lat": 25.00518657046678,
                                "lng": 102.63784082190135
                            },
                            {
                                "lat": 25.0052070370547,
                                "lng": 102.63820912716031
                            },
                            {
                                "lat": 25.00587424593254,
                                "lng": 102.63890980545787
                            },
                            {
                                "lat": 25.006291761280483,
                                "lng": 102.63934099210252
                            },
                            {
                                "lat": 25.00678704723446,
                                "lng": 102.63986650082568
                            },
                            {
                                "lat": 25.00692621813083,
                                "lng": 102.63915683947303
                            },
                            {
                                "lat": 25.00724549193771,
                                "lng": 102.63851005950606
                            },
                            {
                                "lat": 25.008068232111214,
                                "lng": 102.63802048300329
                            },
                            {
                                "lat": 25.008805009626638,
                                "lng": 102.6376791269096
                            },
                            {
                                "lat": 25.00928800579502,
                                "lng": 102.63765666927186
                            },
                            {
                                "lat": 25.009582714378038,
                                "lng": 102.63818666952257
                            },
                            {
                                "lat": 25.009279819435285,
                                "lng": 102.63858192394683
                            },
                            {
                                "lat": 25.009582714378038,
                                "lng": 102.63928709377193
                            },
                            {
                                "lat": 25.011011222237478,
                                "lng": 102.63965090750335
                            },
                            {
                                "lat": 25.01187077474433,
                                "lng": 102.64024378913975
                            },
                            {
                                "lat": 25.01179709905354,
                                "lng": 102.639385907378
                            },
                            {
                                "lat": 25.010651026997376,
                                "lng": 102.63834387298677
                            },
                            {
                                "lat": 25.011203598803103,
                                "lng": 102.63692005875392
                            },
                            {
                                "lat": 25.01287767137263,
                                "lng": 102.63761624552393
                            },
                            {
                                "lat": 25.013311534825956,
                                "lng": 102.63824505938071
                            },
                            {
                                "lat": 25.014097396757276,
                                "lng": 102.63777344898811
                            },
                            {
                                "lat": 25.0148095797399,
                                "lng": 102.63998328054194
                            },
                            {
                                "lat": 25.015603617911093,
                                "lng": 102.64064353509156
                            },
                            {
                                "lat": 25.01652453196753,
                                "lng": 102.64085463688633
                            },
                            {
                                "lat": 25.015370318574703,
                                "lng": 102.6430420108024
                            },
                            {
                                "lat": 25.014330698539165,
                                "lng": 102.64512158805731
                            },
                            {
                                "lat": 25.014604929885188,
                                "lng": 102.64588514774054
                            },
                            {
                                "lat": 25.014862788645637,
                                "lng": 102.64667565658905
                            },
                            {
                                "lat": 25.01550947963631,
                                "lng": 102.64733141961112
                            },
                            {
                                "lat": 25.016315792060198,
                                "lng": 102.64807252165662
                            },
                            {
                                "lat": 25.017707384664398,
                                "lng": 102.64866540329301
                            },
                            {
                                "lat": 25.016917453172603,
                                "lng": 102.65061023472147
                            },
                            {
                                "lat": 25.01602519276817,
                                "lng": 102.65260447295296
                            },
                            {
                                "lat": 25.015112460891945,
                                "lng": 102.65432921953155
                            },
                            {
                                "lat": 25.014920090518046,
                                "lng": 102.65548354211148
                            },
                            {
                                "lat": 25.016606390656772,
                                "lng": 102.65560032182775
                            },
                            {
                                "lat": 25.01583282384018,
                                "lng": 102.65765744144491
                            },
                            {
                                "lat": 25.015423527234734,
                                "lng": 102.65829523835679
                            },
                            {
                                "lat": 25.016446766161646,
                                "lng": 102.65992117132932
                            },
                            {
                                "lat": 25.017723756247168,
                                "lng": 102.66096320572053
                            },
                            {
                                "lat": 25.020306345789436,
                                "lng": 102.66103507016132
                            },
                            {
                                "lat": 25.019950270940004,
                                "lng": 102.6619243926159
                            },
                            {
                                "lat": 25.0190621256727,
                                "lng": 102.662351087733
                            },
                            {
                                "lat": 25.01914807549864,
                                "lng": 102.66383778335152
                            },
                            {
                                "lat": 25.01815350950558,
                                "lng": 102.66434083443694
                            },
                            {
                                "lat": 25.018202624066827,
                                "lng": 102.66512685175792
                            },
                            {
                                "lat": 25.019700608641152,
                                "lng": 102.6664338862745
                            },
                            {
                                "lat": 25.02133363634131,
                                "lng": 102.66764659871257
                            },
                            {
                                "lat": 25.02320811223649,
                                "lng": 102.66925905710245
                            },
                            {
                                "lat": 25.024972057658754,
                                "lng": 102.67142397338078
                            },
                            {
                                "lat": 25.025921548990247,
                                "lng": 102.67196744821413
                            },
                            {
                                "lat": 25.02663366261452,
                                "lng": 102.67211566862323
                            },
                            {
                                "lat": 25.027288476052913,
                                "lng": 102.67184617697033
                            },
                            {
                                "lat": 25.02820520893141,
                                "lng": 102.67154973615213
                            },
                            {
                                "lat": 25.029040084635238,
                                "lng": 102.6710916003422
                            },
                            {
                                "lat": 25.029883139566813,
                                "lng": 102.67039990509974
                            },
                            {
                                "lat": 25.03066070931164,
                                "lng": 102.66954651486554
                            },
                            {
                                "lat": 25.030726188641644,
                                "lng": 102.66792956494812
                            },
                            {
                                "lat": 25.031119063879718,
                                "lng": 102.66678871695082
                            },
                            {
                                "lat": 25.031970289198608,
                                "lng": 102.66610600476346
                            },
                            {
                                "lat": 25.0326905521121,
                                "lng": 102.66576464866979
                            },
                            {
                                "lat": 25.034294758689665,
                                "lng": 102.66556702145766
                            },
                            {
                                "lat": 25.035350576955135,
                                "lng": 102.66636651336127
                            },
                            {
                                "lat": 25.036250879846104,
                                "lng": 102.66727380192604
                            },
                            {
                                "lat": 25.037142991575088,
                                "lng": 102.66711210693431
                            },
                            {
                                "lat": 25.038174231820868,
                                "lng": 102.66695939499766
                            },
                            {
                                "lat": 25.03893537971244,
                                "lng": 102.66678871695082
                            },
                            {
                                "lat": 25.03916044941062,
                                "lng": 102.6657107503392
                            },
                            {
                                "lat": 25.039156357238017,
                                "lng": 102.66414320722481
                            },
                            {
                                "lat": 25.039066329405816,
                                "lng": 102.6631954949121
                            },
                            {
                                "lat": 25.039242292833695,
                                "lng": 102.66174922304151
                            },
                            {
                                "lat": 25.041697569847884,
                                "lng": 102.66171329082113
                            },
                            {
                                "lat": 25.043579915233142,
                                "lng": 102.66189295192306
                            },
                            {
                                "lat": 25.045118506283018,
                                "lng": 102.66212651135558
                            },
                            {
                                "lat": 25.045511334912263,
                                "lng": 102.66327634240797
                            },
                            {
                                "lat": 25.047082636704033,
                                "lng": 102.66399498681571
                            },
                            {
                                "lat": 25.048392039310336,
                                "lng": 102.6646058345623
                            },
                            {
                                "lat": 25.049930569304273,
                                "lng": 102.66501905509675
                            },
                            {
                                "lat": 25.051059903364155,
                                "lng": 102.66552210618217
                            },
                            {
                                "lat": 25.051943722681767,
                                "lng": 102.66591736060643
                            },
                            {
                                "lat": 25.052185135171328,
                                "lng": 102.66394108848513
                            },
                            {
                                "lat": 25.052365171291278,
                                "lng": 102.66144379916823
                            },
                            {
                                "lat": 25.052577940906524,
                                "lng": 102.65900040818188
                            },
                            {
                                "lat": 25.052741609587216,
                                "lng": 102.656413288314
                            },
                            {
                                "lat": 25.052938011712364,
                                "lng": 102.65481430450677
                            },
                            {
                                "lat": 25.0528970946292,
                                "lng": 102.65342193096677
                            },
                            {
                                "lat": 25.05204601616824,
                                "lng": 102.65254159156729
                            },
                            {
                                "lat": 25.05092487484547,
                                "lng": 102.65112226886198
                            },
                            {
                                "lat": 25.049337255528854,
                                "lng": 102.64974786143218
                            },
                            {
                                "lat": 25.048387947449214,
                                "lng": 102.64836447094726
                            },
                            {
                                "lat": 25.048698928500798,
                                "lng": 102.64583124940997
                            },
                            {
                                "lat": 25.04909174553115,
                                "lng": 102.64360345174595
                            },
                            {
                                "lat": 25.050327474140136,
                                "lng": 102.64226497653652
                            },
                            {
                                "lat": 25.05156319015432,
                                "lng": 102.64063006050891
                            },
                            {
                                "lat": 25.05193963094051,
                                "lng": 102.63942633112593
                            },
                            {
                                "lat": 25.052348804382337,
                                "lng": 102.63824056785316
                            },
                            {
                                "lat": 25.052029649216202,
                                "lng": 102.63695599097431
                            },
                            {
                                "lat": 25.050450227950012,
                                "lng": 102.63577022770153
                            },
                            {
                                "lat": 25.04895262297844,
                                "lng": 102.6350156510734
                            },
                            {
                                "lat": 25.048510703222757,
                                "lng": 102.63210514122203
                            },
                            {
                                "lat": 25.048559805497373,
                                "lng": 102.62893412277286
                            },
                            {
                                "lat": 25.048813500266107,
                                "lng": 102.62733513896562
                            },
                            {
                                "lat": 25.049680968690478,
                                "lng": 102.62394852719413
                            },
                            {
                                "lat": 25.051775961177093,
                                "lng": 102.61913360966223
                            },
                            {
                                "lat": 25.049811906781457,
                                "lng": 102.61568411650507
                            },
                            {
                                "lat": 25.04797876063987,
                                "lng": 102.61309699663718
                            },
                            {
                                "lat": 25.04391955270227,
                                "lng": 102.61122852117704
                            },
                            {
                                "lat": 25.039467361962412,
                                "lng": 102.60921631683536
                            },
                            {
                                "lat": 25.03344354967756,
                                "lng": 102.60706038361212
                            },
                            {
                                "lat": 25.02597884564331,
                                "lng": 102.60576682367818
                            },
                            {
                                "lat": 25.02152599655408,
                                "lng": 102.60562309479663
                            },
                            {
                                "lat": 25.01589421821201,
                                "lng": 102.60504817927043
                            },
                            {
                                "lat": 25.01104806032682,
                                "lng": 102.60547936591507
                            },
                            {
                                "lat": 25.006856632702576,
                                "lng": 102.60591055255972
                            },
                            {
                                "lat": 25.00292703795896,
                                "lng": 102.60562309479663
                            },
                            {
                                "lat": 24.999914262583776,
                                "lng": 102.60591055255972
                            },
                            {
                                "lat": 24.994019486031895,
                                "lng": 102.60605428144127
                            },
                            {
                                "lat": 24.99061348482359,
                                "lng": 102.60634173920437
                            },
                            {
                                "lat": 24.987993418957547,
                                "lng": 102.60706038361212
                            },
                            {
                                "lat": 24.98498027341086,
                                "lng": 102.60792275690142
                            },
                            {
                                "lat": 24.98170503052271,
                                "lng": 102.60792275690142
                            },
                            {
                                "lat": 24.979346801025848,
                                "lng": 102.60821021466451
                            },
                            {
                                "lat": 24.975940388810905,
                                "lng": 102.60878513019071
                            },
                            {
                                "lat": 24.97187877265801,
                                "lng": 102.60921631683536
                            },
                            {
                                "lat": 24.969389327997703,
                                "lng": 102.60979123236154
                            },
                            {
                                "lat": 24.967948047284576,
                                "lng": 102.61094106341395
                            },
                            {
                                "lat": 24.965851608503055,
                                "lng": 102.61209089446633
                            },
                            {
                                "lat": 24.96467234581859,
                                "lng": 102.61439055657112
                            },
                            {
                                "lat": 24.962313786172633,
                                "lng": 102.61611530314971
                            },
                            {
                                "lat": 24.96061035356219,
                                "lng": 102.61697767643899
                            },
                            {
                                "lat": 24.95825171521245,
                                "lng": 102.61898988078069
                            },
                            {
                                "lat": 24.956417187126647,
                                "lng": 102.62143327176702
                            },
                            {
                                "lat": 24.95301013306368,
                                "lng": 102.6225831028194
                            },
                            {
                                "lat": 24.94973402964657,
                                "lng": 102.6225831028194
                            },
                            {
                                "lat": 24.947113083463297,
                                "lng": 102.62243937393787
                            },
                            {
                                "lat": 24.944754183680516,
                                "lng": 102.6231580183456
                            },
                            {
                                "lat": 24.941084693229847,
                                "lng": 102.62387666275335
                            },
                            {
                                "lat": 24.93964307745848,
                                "lng": 102.62574513821349
                            },
                            {
                                "lat": 24.938332502865844,
                                "lng": 102.62818852919982
                            },
                            {
                                "lat": 24.937808269082115,
                                "lng": 102.63264412452784
                            },
                            {
                                "lat": 24.938463560959402,
                                "lng": 102.63695599097431
                            },
                            {
                                "lat": 24.939905190685543,
                                "lng": 102.64112412853923
                            },
                            {
                                "lat": 24.940298359468947,
                                "lng": 102.64442989281486
                            },
                            {
                                "lat": 24.94082258254006,
                                "lng": 102.64716074156429
                            },
                            {
                                "lat": 24.942002076203742,
                                "lng": 102.65017904807682
                            },
                            {
                                "lat": 24.94301774215342,
                                "lng": 102.65071803138262
                            }
                        ]
                    }, {
                        name: "棕树营、兴苑片区",
                        //center: [102.680952, 25.025942],
                        center: [102.688267, 25.033017],
                        coordinates: [{
                            "lat": 25.052103300482962,
                            "lng": 102.66606108948798
                        },
                            {
                                "lat": 25.051655254585004,
                                "lng": 102.67306787246349
                            },
                            {
                                "lat": 25.051000572669924,
                                "lng": 102.68029024876134
                            },
                            {
                                "lat": 25.050509558913564,
                                "lng": 102.68751262505917
                            },
                            {
                                "lat": 25.050705964654743,
                                "lng": 102.692507203693
                            },
                            {
                                "lat": 25.050247684097066,
                                "lng": 102.69570517130747
                            },
                            {
                                "lat": 25.04918993701735,
                                "lng": 102.69577703574826
                            },
                            {
                                "lat": 25.04369038724232,
                                "lng": 102.6962800868337
                            },
                            {
                                "lat": 25.03838701376237,
                                "lng": 102.6990828000239
                            },
                            {
                                "lat": 25.033869142355947,
                                "lng": 102.70181364877332
                            },
                            {
                                "lat": 25.030136860825095,
                                "lng": 102.7052631419305
                            },
                            {
                                "lat": 25.027714090318607,
                                "lng": 102.70691602406832
                            },
                            {
                                "lat": 25.02476741235835,
                                "lng": 102.70332280202959
                            },
                            {
                                "lat": 25.021558726112204,
                                "lng": 102.69901093558312
                            },
                            {
                                "lat": 25.01631987242706,
                                "lng": 102.6926150003542
                            },
                            {
                                "lat": 25.01337291789622,
                                "lng": 102.68506923407287
                            },
                            {
                                "lat": 25.009770987466215,
                                "lng": 102.68054177430407
                            },
                            {
                                "lat": 25.007020350481653,
                                "lng": 102.6770922811469
                            },
                            {
                                "lat": 25.002697795098282,
                                "lng": 102.67335533022663
                            },
                            {
                                "lat": 25.000012493859632,
                                "lng": 102.67112753256262
                            },
                            {
                                "lat": 24.996672158283847,
                                "lng": 102.66897159933939
                            },
                            {
                                "lat": 24.994641713364228,
                                "lng": 102.66739058164234
                            },
                            {
                                "lat": 24.99329898115663,
                                "lng": 102.66708515776905
                            },
                            {
                                "lat": 24.9921854846613,
                                "lng": 102.66735464942195
                            },
                            {
                                "lat": 24.991383105863736,
                                "lng": 102.66803736160931
                            },
                            {
                                "lat": 24.99048247029271,
                                "lng": 102.66663600501421
                            },
                            {
                                "lat": 24.98971283097222,
                                "lng": 102.6649651567662
                            },
                            {
                                "lat": 24.98941807419746,
                                "lng": 102.66286312187354
                            },
                            {
                                "lat": 24.98930344636984,
                                "lng": 102.66092278197264
                            },
                            {
                                "lat": 24.989090565831805,
                                "lng": 102.65986278147122
                            },
                            {
                                "lat": 24.989090565831805,
                                "lng": 102.65828176377417
                            },
                            {
                                "lat": 24.989111047709272,
                                "lng": 102.65741939048485
                            },
                            {
                                "lat": 24.989082390690125,
                                "lng": 102.65680405121071
                            },
                            {
                                "lat": 24.989647342107176,
                                "lng": 102.65686693259639
                            },
                            {
                                "lat": 24.98985612783605,
                                "lng": 102.65753167867356
                            },
                            {
                                "lat": 24.99043335710283,
                                "lng": 102.65806617045182
                            },
                            {
                                "lat": 24.990928707692724,
                                "lng": 102.6584075265455
                            },
                            {
                                "lat": 24.99144452517003,
                                "lng": 102.65873989958408
                            },
                            {
                                "lat": 24.991890746460157,
                                "lng": 102.65892405221356
                            },
                            {
                                "lat": 24.992312403605286,
                                "lng": 102.65904981498493
                            },
                            {
                                "lat": 24.99249662228728,
                                "lng": 102.65860066223007
                            },
                            {
                                "lat": 24.99278727786225,
                                "lng": 102.65811557725485
                            },
                            {
                                "lat": 24.993102495094618,
                                "lng": 102.65770684824794
                            },
                            {
                                "lat": 24.99394989321227,
                                "lng": 102.65762150922453
                            },
                            {
                                "lat": 24.995272149971616,
                                "lng": 102.6578326110193
                            },
                            {
                                "lat": 24.996418367101896,
                                "lng": 102.65818744169563
                            },
                            {
                                "lat": 24.997253461347128,
                                "lng": 102.65834015363227
                            },
                            {
                                "lat": 24.997875684701242,
                                "lng": 102.65819193322318
                            },
                            {
                                "lat": 24.998256385577307,
                                "lng": 102.65792693309781
                            },
                            {
                                "lat": 24.998768078424487,
                                "lng": 102.65776972963363
                            },
                            {
                                "lat": 24.99892772615183,
                                "lng": 102.65679506815562
                            },
                            {
                                "lat": 24.999054625477807,
                                "lng": 102.65534879628503
                            },
                            {
                                "lat": 24.999075093098618,
                                "lng": 102.65470201631805
                            },
                            {
                                "lat": 24.99962362405219,
                                "lng": 102.65426184661831
                            },
                            {
                                "lat": 24.999554034441484,
                                "lng": 102.65209243881243
                            },
                            {
                                "lat": 25.000651089548825,
                                "lng": 102.65208345575734
                            },
                            {
                                "lat": 25.002177944537696,
                                "lng": 102.65237091352044
                            },
                            {
                                "lat": 25.004032249327164,
                                "lng": 102.65267184586618
                            },
                            {
                                "lat": 25.006185335935896,
                                "lng": 102.65381718539102
                            },
                            {
                                "lat": 25.007454247434673,
                                "lng": 102.65498498255361
                            },
                            {
                                "lat": 25.008493926331884,
                                "lng": 102.65620218651922
                            },
                            {
                                "lat": 25.009324844407,
                                "lng": 102.65722176327272
                            },
                            {
                                "lat": 25.009754627387924,
                                "lng": 102.65800778059369
                            },
                            {
                                "lat": 25.010258085517187,
                                "lng": 102.65898244207169
                            },
                            {
                                "lat": 25.010839311006134,
                                "lng": 102.66005142562821
                            },
                            {
                                "lat": 25.01154332688758,
                                "lng": 102.6613584601448
                            },
                            {
                                "lat": 25.0122309663671,
                                "lng": 102.66257117258287
                            },
                            {
                                "lat": 25.012611622261975,
                                "lng": 102.66281371507048
                            },
                            {
                                "lat": 25.013029114452237,
                                "lng": 102.66379735960358
                            },
                            {
                                "lat": 25.01329925569293,
                                "lng": 102.66477202108159
                            },
                            {
                                "lat": 25.013954141055056,
                                "lng": 102.66607007254308
                            },
                            {
                                "lat": 25.013790420045602,
                                "lng": 102.66684710680896
                            },
                            {
                                "lat": 25.0144412097531,
                                "lng": 102.6675567681616
                            },
                            {
                                "lat": 25.016143888337663,
                                "lng": 102.66893117559141
                            },
                            {
                                "lat": 25.01762143381859,
                                "lng": 102.67013490497439
                            },
                            {
                                "lat": 25.018034815900535,
                                "lng": 102.67057058314658
                            },
                            {
                                "lat": 25.01866921140784,
                                "lng": 102.67016634566723
                            },
                            {
                                "lat": 25.019991199136744,
                                "lng": 102.67195397363149
                            },
                            {
                                "lat": 25.020118076458925,
                                "lng": 102.67250643151995
                            },
                            {
                                "lat": 25.020015756048153,
                                "lng": 102.67269058414942
                            },
                            {
                                "lat": 25.020105798014185,
                                "lng": 102.6730409232982
                            },
                            {
                                "lat": 25.02001984886624,
                                "lng": 102.67338227939189
                            },
                            {
                                "lat": 25.01959828787855,
                                "lng": 102.67364278798969
                            },
                            {
                                "lat": 25.01927904654499,
                                "lng": 102.67385838131202
                            },
                            {
                                "lat": 25.019487781358077,
                                "lng": 102.67471177154621
                            },
                            {
                                "lat": 25.019676051665993,
                                "lng": 102.67508007680517
                            },
                            {
                                "lat": 25.020089426752605,
                                "lng": 102.67508007680517
                            },
                            {
                                "lat": 25.02042503717384,
                                "lng": 102.67565499233137
                            },
                            {
                                "lat": 25.021693799895026,
                                "lng": 102.67520134804899
                            },
                            {
                                "lat": 25.022565554982545,
                                "lng": 102.67591550092918
                            },
                            {
                                "lat": 25.023797461122257,
                                "lng": 102.67675990810828
                            },
                            {
                                "lat": 25.0234168402941,
                                "lng": 102.67834990886043
                            },
                            {
                                "lat": 25.023695143812628,
                                "lng": 102.67927965506294
                            },
                            {
                                "lat": 25.02375653420876,
                                "lng": 102.67972880781778
                            },
                            {
                                "lat": 25.024280397659517,
                                "lng": 102.67988601128198
                            },
                            {
                                "lat": 25.025197153258173,
                                "lng": 102.6796928755974
                            },
                            {
                                "lat": 25.02601158657577,
                                "lng": 102.67947728227507
                            },
                            {
                                "lat": 25.026555903284034,
                                "lng": 102.67914490923648
                            },
                            {
                                "lat": 25.026748255221264,
                                "lng": 102.67836787497062
                            },
                            {
                                "lat": 25.026384014060927,
                                "lng": 102.67773007805874
                            },
                            {
                                "lat": 25.025954289938163,
                                "lng": 102.67673295894299
                            },
                            {
                                "lat": 25.025856067067902,
                                "lng": 102.67581219579557
                            },
                            {
                                "lat": 25.02622440242151,
                                "lng": 102.67520134804899
                            },
                            {
                                "lat": 25.02662547742418,
                                "lng": 102.67402007630376
                            },
                            {
                                "lat": 25.026928329098986,
                                "lng": 102.67312626232162
                            },
                            {
                                "lat": 25.026408569679138,
                                "lng": 102.67269058414942
                            },
                            {
                                "lat": 25.02663366261452,
                                "lng": 102.67211566862323
                            },
                            {
                                "lat": 25.027288476052913,
                                "lng": 102.67184617697033
                            },
                            {
                                "lat": 25.02820520893141,
                                "lng": 102.67154973615213
                            },
                            {
                                "lat": 25.029040084635238,
                                "lng": 102.6710916003422
                            },
                            {
                                "lat": 25.029883139566813,
                                "lng": 102.67039990509974
                            },
                            {
                                "lat": 25.03066070931164,
                                "lng": 102.66954651486554
                            },
                            {
                                "lat": 25.030726188641644,
                                "lng": 102.66792956494812
                            },
                            {
                                "lat": 25.031119063879718,
                                "lng": 102.66678871695082
                            },
                            {
                                "lat": 25.031970289198608,
                                "lng": 102.66610600476346
                            },
                            {
                                "lat": 25.0326905521121,
                                "lng": 102.66576464866979
                            },
                            {
                                "lat": 25.034294758689665,
                                "lng": 102.66556702145766
                            },
                            {
                                "lat": 25.035350576955135,
                                "lng": 102.66636651336127
                            },
                            {
                                "lat": 25.036250879846104,
                                "lng": 102.66727380192604
                            },
                            {
                                "lat": 25.037142991575088,
                                "lng": 102.66711210693431
                            },
                            {
                                "lat": 25.038174231820868,
                                "lng": 102.66695939499766
                            },
                            {
                                "lat": 25.03893537971244,
                                "lng": 102.66678871695082
                            },
                            {
                                "lat": 25.03916044941062,
                                "lng": 102.6657107503392
                            },
                            {
                                "lat": 25.039156357238017,
                                "lng": 102.66414320722481
                            },
                            {
                                "lat": 25.039066329405816,
                                "lng": 102.6631954949121
                            },
                            {
                                "lat": 25.039242292833695,
                                "lng": 102.66174922304151
                            },
                            {
                                "lat": 25.041697569847884,
                                "lng": 102.66171329082113
                            },
                            {
                                "lat": 25.043579915233142,
                                "lng": 102.66189295192306
                            },
                            {
                                "lat": 25.045118506283018,
                                "lng": 102.66212651135558
                            },
                            {
                                "lat": 25.045511334912263,
                                "lng": 102.66327634240797
                            },
                            {
                                "lat": 25.047082636704033,
                                "lng": 102.66399498681571
                            },
                            {
                                "lat": 25.048392039310336,
                                "lng": 102.6646058345623
                            },
                            {
                                "lat": 25.049930569304273,
                                "lng": 102.66501905509675
                            },
                            {
                                "lat": 25.051059903364155,
                                "lng": 102.66552210618217
                            },
                            {
                                "lat": 25.051943722681767,
                                "lng": 102.66591736060643
                            }
                        ]
                    }, {
                        name: "永昌片区",
                        // center: [102.716412, 25.018824],
                        center: [102.720318, 25.016647],
                        coordinates: [{
                            "lat": 25.013573502761734,
                            "lng": 102.68529830197778
                        },
                            {
                                "lat": 25.014142433336637,
                                "lng": 102.68592262430701
                            },
                            {
                                "lat": 25.014711361246192,
                                "lng": 102.6866637263525
                            },
                            {
                                "lat": 25.01532940221379,
                                "lng": 102.68735542159496
                            },
                            {
                                "lat": 25.01575916394641,
                                "lng": 102.68793482864871
                            },
                            {
                                "lat": 25.01617255236833,
                                "lng": 102.68859508319832
                            },
                            {
                                "lat": 25.016356734875398,
                                "lng": 102.68923737163774
                            },
                            {
                                "lat": 25.01646315130771,
                                "lng": 102.69010872798214
                            },
                            {
                                "lat": 25.016471337183255,
                                "lng": 102.69125406750697
                            },
                            {
                                "lat": 25.016549102973404,
                                "lng": 102.69235000022879
                            },
                            {
                                "lat": 25.016995232070308,
                                "lng": 102.69367050932802
                            },
                            {
                                "lat": 25.017629633009243,
                                "lng": 102.6944116113735
                            },
                            {
                                "lat": 25.018362259646796,
                                "lng": 102.69521559480467
                            },
                            {
                                "lat": 25.0189229820757,
                                "lng": 102.69574559505539
                            },
                            {
                                "lat": 25.01964332241769,
                                "lng": 102.69650017168351
                            },
                            {
                                "lat": 25.02085888705348,
                                "lng": 102.69790152827862
                            },
                            {
                                "lat": 25.022058068522302,
                                "lng": 102.69932534251146
                            },
                            {
                                "lat": 25.02267607209413,
                                "lng": 102.70044373287101
                            },
                            {
                                "lat": 25.02308534425106,
                                "lng": 102.70132856379804
                            },
                            {
                                "lat": 25.025651449225226,
                                "lng": 102.70352042924166
                            },
                            {
                                "lat": 25.026629583411616,
                                "lng": 102.70458042974309
                            },
                            {
                                "lat": 25.027484932787626,
                                "lng": 102.70622882035336
                            },
                            {
                                "lat": 25.02791874404279,
                                "lng": 102.7069923800366
                            },
                            {
                                "lat": 25.028892767437966,
                                "lng": 102.70625576951865
                            },
                            {
                                "lat": 25.02955575368084,
                                "lng": 102.70576170148833
                            },
                            {
                                "lat": 25.030488839294033,
                                "lng": 102.70495322652961
                            },
                            {
                                "lat": 25.031855714914343,
                                "lng": 102.70392017519347
                            },
                            {
                                "lat": 25.032641456804445,
                                "lng": 102.70324644606121
                            },
                            {
                                "lat": 25.033672735313537,
                                "lng": 102.702482886378
                            },
                            {
                                "lat": 25.034941359551034,
                                "lng": 102.70145881809695
                            },
                            {
                                "lat": 25.036111755954213,
                                "lng": 102.70054254647708
                            },
                            {
                                "lat": 25.037404908081207,
                                "lng": 102.69956339347152
                            },
                            {
                                "lat": 25.037314878949175,
                                "lng": 102.70119830949915
                            },
                            {
                                "lat": 25.037765023941216,
                                "lng": 102.70250085248819
                            },
                            {
                                "lat": 25.038624387014984,
                                "lng": 102.70356085298961
                            },
                            {
                                "lat": 25.038968130539875,
                                "lng": 102.70593237953517
                            },
                            {
                                "lat": 25.039058158444956,
                                "lng": 102.70902255048847
                            },
                            {
                                "lat": 25.03921366103271,
                                "lng": 102.71154678897068
                            },
                            {
                                "lat": 25.039483744000812,
                                "lng": 102.71492441768707
                            },
                            {
                                "lat": 25.03986840658391,
                                "lng": 102.71673899481662
                            },
                            {
                                "lat": 25.039631061729956,
                                "lng": 102.71817628363212
                            },
                            {
                                "lat": 25.039573771523212,
                                "lng": 102.72054781017768
                            },
                            {
                                "lat": 25.039581955840124,
                                "lng": 102.72315289615575
                            },
                            {
                                "lat": 25.039745642062258,
                                "lng": 102.72492255800982
                            },
                            {
                                "lat": 25.039852037988194,
                                "lng": 102.72627001627434
                            },
                            {
                                "lat": 25.03890265565785,
                                "lng": 102.72644069432118
                            },
                            {
                                "lat": 25.037151189447027,
                                "lng": 102.72657544014764
                            },
                            {
                                "lat": 25.035497913094776,
                                "lng": 102.72678205041487
                            },
                            {
                                "lat": 25.033279868343612,
                                "lng": 102.726979677627
                            },
                            {
                                "lat": 25.03153650581812,
                                "lng": 102.72715035567383
                            },
                            {
                                "lat": 25.02947390372337,
                                "lng": 102.72745577954713
                            },
                            {
                                "lat": 25.02777141209228,
                                "lng": 102.72754561009809
                            },
                            {
                                "lat": 25.026093452260547,
                                "lng": 102.72775222036532
                            },
                            {
                                "lat": 25.024251762327957,
                                "lng": 102.72803967812843
                            },
                            {
                                "lat": 25.021976213508633,
                                "lng": 102.72806662729371
                            },
                            {
                                "lat": 25.016491801869705,
                                "lng": 102.72768933897964
                            },
                            {
                                "lat": 25.013823177658757,
                                "lng": 102.72794086452235
                            },
                            {
                                "lat": 25.009631845799767,
                                "lng": 102.72856967837913
                            },
                            {
                                "lat": 25.00527663682239,
                                "lng": 102.72905476335436
                            },
                            {
                                "lat": 25.00177270874695,
                                "lng": 102.72853374615875
                            },
                            {
                                "lat": 24.999005516569042,
                                "lng": 102.72804866118352
                            },
                            {
                                "lat": 24.996909613101256,
                                "lng": 102.72767137286945
                            },
                            {
                                "lat": 24.995517782233726,
                                "lng": 102.72745577954713
                            },
                            {
                                "lat": 24.99363469157322,
                                "lng": 102.72729408455538
                            },
                            {
                                "lat": 24.991751571739638,
                                "lng": 102.72686289791073
                            },
                            {
                                "lat": 24.98973741997948,
                                "lng": 102.72655747403745
                            },
                            {
                                "lat": 24.987886990984705,
                                "lng": 102.72610832128261
                            },
                            {
                                "lat": 24.98692082660176,
                                "lng": 102.72598255851125
                            },
                            {
                                "lat": 24.985676264557142,
                                "lng": 102.72560527019718
                            },
                            {
                                "lat": 24.985749956085634,
                                "lng": 102.72473840538034
                            },
                            {
                                "lat": 24.98578270786174,
                                "lng": 102.7240197609726
                            },
                            {
                                "lat": 24.985799083746485,
                                "lng": 102.72331908267505
                            },
                            {
                                "lat": 24.985799083746485,
                                "lng": 102.72245670938575
                            },
                            {
                                "lat": 24.985831835509362,
                                "lng": 102.72148653943529
                            },
                            {
                                "lat": 24.985831835509362,
                                "lng": 102.72046247115426
                            },
                            {
                                "lat": 24.985815459629027,
                                "lng": 102.71945636898342
                            },
                            {
                                "lat": 24.98568445250696,
                                "lng": 102.71845026681257
                            },
                            {
                                "lat": 24.98565170070439,
                                "lng": 102.71755196130289
                            },
                            {
                                "lat": 24.985618948892995,
                                "lng": 102.71658179135244
                            },
                            {
                                "lat": 24.985553445243752,
                                "lng": 102.71521636697771
                            },
                            {
                                "lat": 24.98553706932592,
                                "lng": 102.7144258581292
                            },
                            {
                                "lat": 24.98553706932592,
                                "lng": 102.71306043375448
                            },
                            {
                                "lat": 24.985504317483652,
                                "lng": 102.71174890771034
                            },
                            {
                                "lat": 24.986814384293474,
                                "lng": 102.71149738216764
                            },
                            {
                                "lat": 24.98815718812482,
                                "lng": 102.7113536532861
                            },
                            {
                                "lat": 24.98989298573547,
                                "lng": 102.7116051788288
                            },
                            {
                                "lat": 24.99146500746847,
                                "lng": 102.71210822991422
                            },
                            {
                                "lat": 24.993069758686246,
                                "lng": 102.71239568767731
                            },
                            {
                                "lat": 24.994477992302116,
                                "lng": 102.71289873876275
                            },
                            {
                                "lat": 24.996082703742896,
                                "lng": 102.71322212874622
                            },
                            {
                                "lat": 24.998309615129113,
                                "lng": 102.71365331539087
                            },
                            {
                                "lat": 24.999947023938898,
                                "lng": 102.71394077315398
                            },
                            {
                                "lat": 25.001518915639387,
                                "lng": 102.71451568868017
                            },
                            {
                                "lat": 25.003254522436865,
                                "lng": 102.71476721422287
                            },
                            {
                                "lat": 25.003811221252526,
                                "lng": 102.71293467098313
                            },
                            {
                                "lat": 25.00309078700564,
                                "lng": 102.70941331338518
                            },
                            {
                                "lat": 25.002697821070466,
                                "lng": 102.70635907465227
                            },
                            {
                                "lat": 25.002403095785038,
                                "lng": 102.70319703925819
                            },
                            {
                                "lat": 25.002304853864356,
                                "lng": 102.69971161388062
                            },
                            {
                                "lat": 25.003385510622966,
                                "lng": 102.69579500185841
                            },
                            {
                                "lat": 25.004335170748913,
                                "lng": 102.69281262756627
                            },
                            {
                                "lat": 25.00561228818004,
                                "lng": 102.69115974542845
                            },
                            {
                                "lat": 25.00777353324804,
                                "lng": 102.68925533774794
                            },
                            {
                                "lat": 25.008952377987608,
                                "lng": 102.68810550669554
                            },
                            {
                                "lat": 25.010327682390926,
                                "lng": 102.68699160786353
                            },
                            {
                                "lat": 25.01121179842708,
                                "lng": 102.68634482789656
                            },
                            {
                                "lat": 25.01229237595365,
                                "lng": 102.68548245460727
                            }
                        ]
                    }, {
                        name: "阳光片区",
                        // center: [102.691745, 24.986066],
                        center: [102.696747, 24.985864],
                        coordinates: [{
                            "lng": 102.65941362871638,
                            "lat": 24.959267233077473
                        },
                            {
                                "lng": 102.66602515726763,
                                "lat": 24.959529304075787
                            },
                            {
                                "lng": 102.67227736361501,
                                "lat": 24.959529304075787
                            },
                            {
                                "lng": 102.67924821437013,
                                "lat": 24.959136197366767
                            },
                            {
                                "lng": 102.68420686078358,
                                "lat": 24.95821894344279
                            },
                            {
                                "lng": 102.68945296496011,
                                "lat": 24.956908568706506
                            },
                            {
                                "lng": 102.69441161137355,
                                "lat": 24.954418817854908
                            },
                            {
                                "lng": 102.69814856229382,
                                "lat": 24.951535884849203
                            },
                            {
                                "lng": 102.70109500436558,
                                "lat": 24.950684096127524
                            },
                            {
                                "lng": 102.70332280202959,
                                "lat": 24.9535015283926
                            },
                            {
                                "lng": 102.70619737966057,
                                "lat": 24.958677571268613
                            },
                            {
                                "lng": 102.7120183993633,
                                "lat": 24.96391890942922
                            },
                            {
                                "lng": 102.71697704577674,
                                "lat": 24.968570408014816
                            },
                            {
                                "lng": 102.72200755663096,
                                "lat": 24.97420437946712
                            },
                            {
                                "lng": 102.72466654093962,
                                "lat": 24.980755181006298
                            },
                            {
                                "lng": 102.72581637199201,
                                "lat": 24.986192078343024
                            },
                            {
                                "lng": 102.72028281005237,
                                "lat": 24.985471539656697
                            },
                            {
                                "lng": 102.71683331689519,
                                "lat": 24.985340532164102
                            },
                            {
                                "lng": 102.71144348383712,
                                "lat": 24.985078516755465
                            },
                            {
                                "lng": 102.71209026380409,
                                "lat": 24.990711723616563
                            },
                            {
                                "lng": 102.71280890821183,
                                "lat": 24.99418322110737
                            },
                            {
                                "lng": 102.71381501038267,
                                "lat": 24.99903005175055
                            },
                            {
                                "lng": 102.71467738367195,
                                "lat": 25.001649879724166
                            },
                            {
                                "lng": 102.71518043475739,
                                "lat": 25.003876689091204
                            },
                            {
                                "lng": 102.7128807726526,
                                "lat": 25.003680207553398
                            },
                            {
                                "lng": 102.70878449952845,
                                "lat": 25.002992519668872
                            },
                            {
                                "lng": 102.70264008984223,
                                "lat": 25.002272080567533
                            },
                            {
                                "lng": 102.69854381671809,
                                "lat": 25.00246856438245
                            },
                            {
                                "lng": 102.69469906913665,
                                "lat": 25.003516472695843
                            },
                            {
                                "lng": 102.69207601704838,
                                "lat": 25.004597118677992
                            },
                            {
                                "lng": 102.69056686379211,
                                "lat": 25.006496412565678
                            },
                            {
                                "lng": 102.68880618499314,
                                "lat": 25.008231948257393
                            },
                            {
                                "lng": 102.68700957397378,
                                "lat": 25.01049138209782
                            },
                            {
                                "lng": 102.6849973696321,
                                "lat": 25.013209196103197
                            },
                            {
                                "lng": 102.6833085552739,
                                "lat": 25.011670200460415
                            },
                            {
                                "lng": 102.68122448649143,
                                "lat": 25.010196675719506
                            },
                            {
                                "lng": 102.67791872221581,
                                "lat": 25.007413302435697
                            },
                            {
                                "lng": 102.67472075460134,
                                "lat": 25.004891838641313
                            },
                            {
                                "lng": 102.67267261803927,
                                "lat": 25.00286153105909
                            },
                            {
                                "lng": 102.67098380368107,
                                "lat": 25.00007798971783
                            },
                            {
                                "lng": 102.670049565951,
                                "lat": 24.998768065846733
                            },
                            {
                                "lng": 102.66907939600054,
                                "lat": 24.9974908764776
                            },
                            {
                                "lng": 102.66814515827048,
                                "lat": 24.995558692689496
                            },
                            {
                                "lng": 102.66735464942195,
                                "lat": 24.993921224755525
                            },
                            {
                                "lng": 102.6672468527608,
                                "lat": 24.992643984453476
                            },
                            {
                                "lng": 102.66821702271125,
                                "lat": 24.99113747864245
                            },
                            {
                                "lng": 102.66656414057344,
                                "lat": 24.990384218735862
                            },
                            {
                                "lng": 102.66462380067253,
                                "lat": 24.98963095416202
                            },
                            {
                                "lng": 102.66253973189006,
                                "lat": 24.98940169880013
                            },
                            {
                                "lng": 102.66013227312412,
                                "lat": 24.989205193860144
                            },
                            {
                                "lng": 102.65844345876592,
                                "lat": 24.9891396921429
                            },
                            {
                                "lng": 102.65693430550965,
                                "lat": 24.989008688602553
                            },
                            {
                                "lng": 102.65697023773004,
                                "lat": 24.986061071626725
                            },
                            {
                                "lng": 102.65718583105236,
                                "lat": 24.982458331618453
                            },
                            {
                                "lng": 102.65732955993391,
                                "lat": 24.978396933092732
                            },
                            {
                                "lng": 102.657617017697,
                                "lat": 24.97286142158088
                            },
                            {
                                "lng": 102.65783261101933,
                                "lat": 24.96988065721294
                            },
                            {
                                "lng": 102.65768888213779,
                                "lat": 24.965884353055582
                            },
                            {
                                "lng": 102.6579404076805,
                                "lat": 24.963525816895366
                            },
                            {
                                "lng": 102.65858718764747,
                                "lat": 24.96103620136783
                            },
                            {
                                "lng": 102.65898244207173,
                                "lat": 24.960315513685774
                            }
                        ]
                    }],

                    tdqkData: [{
                        order: 1,
                        name: "海口、团结片区",
                        value: 100,
                        percent: '40%'
                    }, {
                        order: 2,
                        name: "棕树营、兴苑片区",
                        value: 89,
                        percent: '23%'
                    }, {
                        order: 3,
                        name: "永昌片区",
                        value: 65,
                        percent: '17%'
                    }, {
                        order: 4,
                        name: "阳光片区",
                        value: 47,
                        percent: '15%'
                    }],

                    jztdChart: null,
                    jztdOption: {
                        title: {
                            text: '',
                            show: false
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            show: false
                        },
                        grid: {
                            top: 10,
                            left: 10,
                            right: 80,
                            bottom: 0,
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            show: false
                        },
                        yAxis: {
                            type: 'category',
                            data: ['昆明', '曲靖', '昭通', '保山', '大理'],
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        series: [{
                            name: '变压器停电情况',
                            type: 'bar',
                            data: [666, 789, 570, 835, 986],
                            itemStyle: {
                                color: '#3155FE'
                            },
                            barWidth: 10,
                            label: {
                                show: true,
                                position: 'right'
                            }
                        }]
                    },

                    tdscfxChart: null,
                    tdscfxOption: {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            show: false,
                            orient: 'vertical',
                            top: 'middle',
                            right: '100',
                        },
                        color: ['#ffa800', '#00cfff', '#ffe000', '#00ffff', '#006ced', '#ff5b00', '#ff3000'],
                        series: [{
                            name: '停电时长分析',
                            type: 'pie',
                            center: ['50%', '50%'],
                            radius: ['60%', '70%'],
                            avoidLabelOverlap: false,
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 15,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: true
                            },
                            label: {
                                show: true,
                                position: 'outside',
                                formatter: '{b}：{c} \n 占比：{d}%'
                            },
                            data: [{
                                value: 4323,
                                name: '24小时以内'
                            },
                                {
                                    value: 4327,
                                    name: '24-48小时'
                                },
                                {
                                    value: 1234,
                                    name: '48小时以上'
                                }
                            ]
                        }]
                    },

                    lstdtjChart: null,
                    lstdtjOption: {
                        color: ['#2BAAFF', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                        title: {
                            text: '',
                            show: false
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#363E43'
                                }
                            }
                        },
                        legend: {
                            show: false
                        },
                        grid: {
                            top: 10,
                            left: 10,
                            right: 20,
                            bottom: 0,
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                color: '#E0E7EF'
                            }
                        },
                        yAxis: {
                            type: 'value',
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                color: '#E0E7EF'
                            }
                        },
                        series: [{
                            name: '历史停电情况',
                            type: 'line',
                            smooth: true,
                            lineStyle: {
                                width: 2
                            },
                            showSymbol: true,
                            symbolSize: 6,
                            label: {
                                show: true,
                                fontWeight: 'normal'
                            },
                            areaStyle: {
                                opacity: 0.8,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(43, 170, 255,0.5)'
                                },
                                    {
                                        offset: 1,
                                        color: 'rgba(43, 170, 255,0.01)'
                                    }
                                ])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [30, 45, 55, 25, 20, 78, 42]
                        }]
                    },
                    markers:[],
                    oldZoom:null,
                    defaultShow:true,
                    buttonText:"隐藏指标"
                }
            },
            created() {
                console.log("created");

                this.getJkList();
                this.getTongJiData();
                this.getTdyjRecord("西山");
                this.getPqtdsl();

            },
            mounted() {
                console.log("mounted");

                //变压器停电情况图表--开始
                // 基于准备好的dom，初始化echarts实例
                // this.jztdChart = echarts.init(document.getElementById('jztdChart'));
                // 使用刚指定的配置项和数据显示图表。
                //this.jztdChart.setOption(this.jztdOption);
                this.getTdsc("西山");
                //变压器停电情况图表--开始

                //停电时长分析图表--开始
                // 基于准备好的dom，初始化echarts实例
                this.tdscfxChart = echarts.init(document.getElementById('tdscfxChart'));
                // 使用刚指定的配置项和数据显示图表。
                // this.tdscfxChart.setOption(this.tdscfxOption);
                this.getTdscfx("西山");
                //停电时长分析图表--开始

                //面积图图表--开始
                // 基于准备好的dom，初始化echarts实例
                this.lstdtjChart = echarts.init(document.getElementById('lstdtjChart'));
                // 使用刚指定的配置项和数据显示图表。
                // lstdtjChart.setOption(this.lstdtjOption);
                this.getLstdtj();
                //面积图图表--开始

                // 绑定页面resize事件监听，浏览器窗口大小改变时，执行charts自带的resize方法，让echarts图表自适应
                window.addEventListener("resize", () => {
                    this.tdscfxChart.resize();
                    this.lstdtjChart.resize();
                });

                // this.initMap("昆明", 11);

                this.initMap(this.cityMapCenter["西山"].center, this.cityMapCenter["西山"].zoom);

                //各板块延迟滑入
                let that = this;
                setTimeout(function () {
                    $("#left1").show();
                    $("#left1").addClass("slip_left_in_animation");
                }, 500);

                setTimeout(function () {
                    $("#left2").show();
                    $("#left2").addClass("slip_left_in_animation");
                }, 1000);

                setTimeout(function () {
                    $("#right1").show();
                    $("#right1").addClass("slip_right_in_animation");
                }, 500);

                setTimeout(function () {
                    $("#right2").show();
                    $("#right2").addClass("slip_right_in_animation");
                    that.tdscfxChart.resize();
                }, 1000);

                setTimeout(function () {
                    $("#right3").show();
                    $("#right3").addClass("slip_right_in_animation");
                    that.lstdtjChart.resize();
                }, 1500);

            },
            methods: {
                doCameraPlay(code) {
                    cameraIndexCode = code;
                    if (oWebControl != null) {
                        doPlay();
                    } else {
                        initPlugin();
                    }
                },
                initMap(center, zoom) {
                    // this.map = initMap({
                    //     tilt: 40,
                    //     heading: 0,
                    //     center: center, //中心点
                    //     zoom: zoom,
                    //     style: [], //whiteStyle,
                    //     skyColors: [
                    //         // 地面颜色
                    //         'rgba(226, 237, 248, 0)',
                    //         // 天空颜色
                    //         'rgba(186, 211, 252, 1)'
                    //     ]
                    // });

                    // var mapStyle = [{
                    //     featureType: 'background',
                    //     elementType: 'geometry',
                    //     stylers: {
                    //         color: '#EFF3FA'
                    //     }
                    // }, {
                    //     featureType: 'poilabel',
                    //     elementType: 'labels.icon',
                    //     stylers: {
                    //         visibility: 'off'
                    //     }
                    // }, {
                    //     featureType: 'road',
                    //     elementType: 'labels',
                    //     stylers: {
                    //         visibility: 'on'
                    //     }
                    //     // }, {
                    //     //     featureType: 'road',
                    //     //     elementType: 'geometry.fill',
                    //     //     stylers: {
                    //     //         color: '#f0f1f7ff'
                    //     //     }
                    // }, {
                    //     featureType: 'road',
                    //     elementType: 'geometry.stroke',
                    //     stylers: {
                    //         color: '#ffffff00'
                    //     }
                    // }];

                    var mapStyle = [{
                        featureType: 'water',
                        elementType: 'all',
                        stylers: {
                            color: '#023262ff'
                        }
                    }, {
                        featureType: 'water',
                        elementType: 'labels',
                        stylers: {
                            visibility: 'on',
                        }
                    }, {
                        featureType: 'water',
                        elementType: 'labels.text.fill',
                        stylers: {
                            "color": "#05ACE3ff"
                        }
                    }, {
                        featureType: 'water',
                        elementType: 'labels.text.stroke',
                        stylers: {
                            "color": "#0271BFff"
                        }
                    },{
                        featureType: 'land',
                        elementType: 'all',
                        stylers: {
                            color: '#023B76ff'
                        }
                    },
                        {
                            featureType: 'boundary',
                            elementType: 'geometry',
                            stylers: {
                                color: '#064f85ff'
                            }
                        },
                        {
                            featureType: 'railway',
                            elementType: 'all',
                            stylers: {
                                visibility: 'off'
                            }
                        },
                        {
                            featureType: 'highway',
                            elementType: 'geometry',
                            stylers: {
                                color: '#005FCAEF'
                            }
                        },
                        {
                            featureType: 'highway',
                            elementType: 'geometry.fill',
                            stylers: {
                                color: '#005b96ef',
                                lightness: 1
                            }
                        },{
                            featureType: 'highway',
                            elementType: 'labels',
                            stylers: {
                                visibility: 'on'
                            }
                        },{
                            featureType: 'arterial',
                            elementType: 'geometry',
                            stylers: {
                                color: '#004981ff'
                            }
                        },
                        {
                            featureType: 'arterial',
                            elementType: 'geometry.fill',
                            stylers: {
                                color: '#00508bff'
                            }
                        },
                        {
                            featureType: 'poi',
                            elementType: 'all',
                            stylers: {
                                visibility: 'on'
                            }
                        }, {
                            featureType: 'poi',
                            elementType: 'labels.text.fill',
                            stylers: {
                                "color": "#05ACE3ff"
                            }
                        }, {
                            featureType: 'poi',
                            elementType: 'labels.text.stroke',
                            stylers: {
                                "color": "#0271BFff"
                            }
                        },{
                            featureType: 'green',
                            elementType: 'all',
                            stylers: {
                                color: '#056197ff',
                                visibility: 'on'
                            }
                        },
                        {
                            featureType: 'subway',
                            elementType: 'all',
                            stylers: {
                                visibility: 'on'
                            }
                        },
                        {
                            featureType: 'manmade',
                            elementType: 'all',
                            stylers: {
                                color: '#056197ff',
                                visibility: 'on'
                            }
                        },
                        {
                            featureType: 'local',
                            elementType: 'all',
                            stylers: {
                                visibility: 'off'
                            }
                        },
                        {
                            featureType: 'arterial',
                            elementType: 'labels',
                            stylers: {
                                visibility: 'off'
                            }
                        },
                        {
                            featureType: 'boundary',
                            elementType: 'geometry.fill',
                            stylers: {
                                color: '#029fd4ff'
                            }
                        },
                        {
                            featureType: 'building',
                            elementType: 'all',
                            stylers: {
                                color: '#1a5787ff'
                            }
                        }, {
                            featureType: 'road',
                            elementType: 'labels',
                            stylers: {
                                visibility: 'on'
                            }
                        }, {
                            featureType: 'road',
                            elementType: 'labels.text.fill',
                            stylers: {
                                "color": "#05ACE3ff"
                            }
                        }, {
                            featureType: 'road',
                            elementType: 'labels.text.stroke',
                            stylers: {
                                "color": "#0271BFff"
                            }
                        }, {
                            featureType: 'road',
                            elementType: 'geometry.fill',
                            stylers: {
                                color: '#005b96ef'
                            }
                        }, {
                            featureType: 'road',
                            elementType: 'geometry.stroke',
                            stylers: {
                                color: '#004981ef'
                            }
                        },{
                            featureType: 'label',
                            elementType: 'all',
                            stylers: {
                                visibility: 'on'
                            }
                        }, {
                            "featureType": "subwaylabel",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "highwaysign",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "nationalwaysign",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "provincialwaysign",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "tertiarywaysign",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        }, {
                            "featureType": "label",
                            "elementType": "labels.text.fill",
                            "stylers": {
                                "color": "#05ACE3ff"
                            }
                        }, {
                            "featureType": "label",
                            "elementType": "labels.text.stroke",
                            "stylers": {
                                "color": "#0271BFff"
                            }
                        }
                    ];

                    this.map = new BMapGL.Map("map_container", {
                        restrictCenter: false,
                        style: {
                            styleJson: mapStyle
                        }
                    }); // 创建地图实例
                    this.map.enableKeyboard();
                    this.map.enableScrollWheelZoom(); //开启鼠标滚轮缩放
                    this.map.enableInertialDragging();
                    this.map.enableContinuousZoom();

                    //存储初始中心点，后续会用到
                    this.initMapCenter = center;

                    var point = new BMapGL.Point(center[0], center[1]); // 创建点坐标
                    this.map.centerAndZoom(point, zoom); // 初始化地图，设置中心点坐标和地图级别

                    this.map.setTilt(30); //设置地图的倾斜角度
                    this.map.setHeading(0); //设置地图旋转角度

                    var bd = new BMapGL.Boundary();
                    console.log(this.map);

                    //记录初始化缩放级别
                    this.oldZoom=this.map.getZoom();

                    let that = this;
                    that.map.addEventListener("zoomend", function(){

                        //删除覆盖物
                        for(var i=0;i<that.markers.length;i++){
                            that.map.removeOverlay(that.markers[i]);
                        }

                        that.markers=[];

                        //重新添加点覆盖物
                        that.yjLayer();
                        that.jkPoint();

                    });

                    // bd.get('西山区', function (rs) {
                    //     var count = rs.boundaries.length; //行政区域的点有多少个
                    //     var pointArray = [];
                    //     for (var i = 0; i < count; i++) {
                    //         var path = [];
                    //         str = rs.boundaries[i].replace(' ', '');
                    //         points = str.split(';');
                    //         for (var j = 0; j < points.length; j++) {
                    //             var lng = points[j].split(',')[0];
                    //             var lat = points[j].split(',')[1];
                    //             path.push(new BMapGL.Point(lng, lat));
                    //         }
                    //         var prism = new BMapGL.Prism(path, 300, {
                    //             topFillColor: '#5679ea',
                    //             topFillOpacity: 0.5,
                    //             sideFillColor: '#5679ea',
                    //             sideFillOpacity: 0.9

                    //         });
                    //         that.map.addOverlay(prism);
                    //     }
                    // });

                    //let mapColor = ['#ED5460', '#5679ea', '#7AED54', '#E9ED54', '#8080FF']
                    //let mapColor = ['#4DF4AD', '#5679ea', '#7AED54', '#E9ED54', '#8080FF']
                    let mapColor = ['#73F8BE', '#6DF0FD', '#0541F5', '#3584F7', '#8080FF']
                    for (var i = 0; i < that.mapJson.length; i++) {
                        var subJson = that.mapJson[i];
                        var count = subJson.coordinates.length; //行政区域的点有多少个
                        var pointArray = [];
                        var path = [];
                        for (var j = 0; j < count; j++) {
                            var lng = subJson.coordinates[j].lng;
                            var lat = subJson.coordinates[j].lat;
                            path.push(new BMapGL.Point(lng, lat));
                        }
                        var prism = new BMapGL.Prism(path, 300, {
                            topFillColor: mapColor[i],
                            topFillOpacity: 0.4,
                            sideFillColor: mapColor[i],
                            sideFillOpacity: 1

                        });
                        that.map.addOverlay(prism);

                        prism.customData = {
                            name: subJson.name
                        };
                        //点击事件
                        prism.addEventListener('click', e => {
                            e.cancelBubble = true; //阻止事件冒泡，避免其他点击事件继续触发。
                            // e.domEvent.stopPropagation(); //阻止事件冒泡，避免其他点击事件继续触发。 --prism没有这个方法，用cancelBubble
                            // console.log(e.target.customData);
                            if(that.defaultShow){
                                that.showCommon();

                                if (!($("#left1").hasClass('slip_left_in_animation'))) {
                                    var new_point = new BMapGL.Point(that.initMapCenter[0], that
                                        .initMapCenter[1]); // 创建点坐标 
                                    // that.map.centerAndZoom(point, zoom); // 初始化地图，设置中心点坐标和地图级别

                                    setTimeout(function () {
                                        that.map.panTo(new_point, {
                                            noAnimation: false
                                        });
                                    }, 1000);
                                }
                            }

                        });

                        let areaColor = mapColor[i];
                        //鼠标移入
                        prism.addEventListener('mouseover', e => {
                            e.target.setTopFillColor(areaColor);
                            e.target.setTopFillOpacity(0.6);
                        });

                        //鼠标移出
                        prism.addEventListener('mouseout', e => {
                            e.target.setTopFillColor(areaColor);
                            e.target.setTopFillOpacity(0.4);
                        });

                        var opts = {
                            position: new BMapGL.Point(subJson.center[0], subJson.center[
                                1]), // 指定文本标注所在的地理位置
                            offset: new BMapGL.Size(-30, -15) // 设置文本偏移量
                        };
                        // 创建文本标注对象
                        var label = new BMapGL.Label(subJson.name, opts);
                        // 自定义文本标注样式
                        label.setStyle({
                            color: '#ffffff',
                            border: 'none',
                            fontSize: '16px',
                            "background-color": "rgba(0,0,0,0)",

                        });
                        that.map.addOverlay(label);

                    }

                    that.view = new mapvgl.View({
                        map: that.map
                    });
                },
                yjLayer() {
                    let that = this;

                    var curZoom=that.map.getZoom();
                    var zoomDiff=curZoom-this.oldZoom;

                    var size=3;//初始大小设置
                    var maxSize=6; //最大大小设置
                    var minSize=1; //最小大小设置
                    if(zoomDiff>maxSize-size){
                        size=maxSize; //最大大小设置
                    }else if(zoomDiff<-size){
                        size=minSize;//当缩放差值小于 负初始大小 时，设置一个最小值，否则，图片会倒过来
                    }else{
                        size+=zoomDiff;
                    }

                    //最小大小设置
                    if(size<minSize){
                        size=minSize;
                    }

                    //图标高宽
                    var iconWidth=(size)*6;
                    var iconHeight=(size)*7;

                    //预警点位
                    var yjJsonData = this.byqYjPoints;
                    for (var i = 0; i < yjJsonData.length; i++) {
                        var result = gcoord.transform(
                            [yjJsonData[i].lng, yjJsonData[i].lat], // 经纬度坐标
                            gcoord.WGS84, // 当前坐标系
                            gcoord.BD09 // 目标坐标系
                        );

                        var point = new BMapGL.Point(result[0], result[1]);
                        var myIcon = new BMapGL.Icon("../../static/img/yjdw.png", new BMapGL.Size(iconWidth, iconHeight), {
                            // 指定定位位置。  
                            // 当标注显示在地图上时，其所指向的地理位置距离图标左上   
                            // 角各偏移10像素和25像素。您可以看到在本例中该位置即是  
                            // 图标中央下端的尖角位置。   
                            anchor: new BMapGL.Size(10, 25),
                            // 设置图片偏移。  
                            // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  
                            // 需要指定大图的偏移位置，此做法与css sprites技术类似。   
                            imageOffset: new BMapGL.Size(0, 0) // 设置图片偏移   
                        });
                        // 创建标注对象并添加到地图  
                        var marker = new BMapGL.Marker(point, {
                            icon: myIcon
                        });
                        that.map.addOverlay(marker);
                        marker.customData = yjJsonData[i];
                        marker.addEventListener("click", function (e) {
                            e.domEvent.stopPropagation(); //阻止事件冒泡，避免其他点击事件继续触发。
                            // console.log(e.target.customData);
                            that.yjDetail = e.target.customData;
                            that.showYjDetail();

                            //地图中心点移动处理
                            if (!($("#yjleft1").hasClass('slip_left_in_animation'))) {
                                let lng = that.initMapCenter[0];
                                let lat = that.initMapCenter[1];
                                let new_lng = lng - 0.07;
                                let new_lat = lat;
                                var new_point = new BMapGL.Point(new_lng, new_lat); // 创建点坐标 
                                setTimeout(function () {
                                    that.map.panTo(new_point, {
                                        noAnimation: false
                                    });
                                }, 1000);
                            }
                        });

                        that.markers.push(marker);
                    }

                    //正常点
                    var zcJsonData = this.byqZcPoints;
                    for (var i = 0; i < zcJsonData.length; i++) {
                        var result = gcoord.transform(
                            [zcJsonData[i].lng, zcJsonData[i].lat], // 经纬度坐标
                            gcoord.WGS84, // 当前坐标系
                            gcoord.BD09 // 目标坐标系
                        );

                        var point = new BMapGL.Point(result[0], result[1]);
                        var myIcon = new BMapGL.Icon("../../static/img/zcdw.png", new BMapGL.Size(iconWidth, iconHeight), {
                            // 指定定位位置。  
                            // 当标注显示在地图上时，其所指向的地理位置距离图标左上   
                            // 角各偏移10像素和25像素。您可以看到在本例中该位置即是  
                            // 图标中央下端的尖角位置。   
                            anchor: new BMapGL.Size(10, 25),
                            // 设置图片偏移。  
                            // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  
                            // 需要指定大图的偏移位置，此做法与css sprites技术类似。   
                            imageOffset: new BMapGL.Size(0, 0) // 设置图片偏移   
                        });
                        // 创建标注对象并添加到地图  
                        var marker = new BMapGL.Marker(point, {
                            icon: myIcon
                        });
                        that.map.addOverlay(marker);
                        marker.customData = zcJsonData[i];
                        marker.addEventListener("click", function (e) {
                            e.domEvent.stopPropagation(); //阻止事件冒泡，避免其他点击事件继续触发。
                            // console.log(e.target.customData);
                            that.yjDetail = e.target.customData;
                            that.showYjDetail();

                            //地图中心点移动处理
                            if (!($("#yjleft1").hasClass('slip_left_in_animation'))) {
                                let lng = that.initMapCenter[0];
                                let lat = that.initMapCenter[1];
                                let new_lng = lng - 0.07;
                                let new_lat = lat;
                                var new_point = new BMapGL.Point(new_lng, new_lat); // 创建点坐标 
                                setTimeout(function () {
                                    that.map.panTo(new_point, {
                                        noAnimation: false
                                    });
                                }, 1000);
                            }
                        });

                        that.markers.push(marker);
                    }
                },
                jkPoint() {
                    let that = this;

                    var curZoom=that.map.getZoom();
                    var zoomDiff=curZoom-this.oldZoom;

                    var size=3;//初始大小设置
                    var maxSize=6; //最大大小设置
                    var minSize=1; //最小大小设置
                    if(zoomDiff>maxSize-size){
                        size=maxSize; //最大大小设置
                    }else if(zoomDiff<-size){
                        size=minSize;//当缩放差值小于 负初始大小 时，设置一个最小值，否则，图片会倒过来
                    }else{
                        size+=zoomDiff;
                    }

                    //最小大小设置
                    if(size<minSize){
                        size=minSize;
                    }

                    //图标高宽
                    var iconWidth=(size)*6;
                    var iconHeight=(size)*6;

                    //摄像头点位
                    var jsonData = this.cityCameraData;

                    for (var i = 0; i < jsonData.length; i++) {
                        var point = new BMapGL.Point(jsonData[i].lng, jsonData[i].lat);

                        var myIcon = new BMapGL.Icon("../../static/img/jkdw.png", new BMapGL.Size(iconWidth, iconHeight), {
                            // 指定定位位置。  
                            // 当标注显示在地图上时，其所指向的地理位置距离图标左上   
                            // 角各偏移10像素和25像素。您可以看到在本例中该位置即是  
                            // 图标中央下端的尖角位置。   
                            anchor: new BMapGL.Size(10, 25),
                            // 设置图片偏移。  
                            // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  
                            // 需要指定大图的偏移位置，此做法与css sprites技术类似。   
                            imageOffset: new BMapGL.Size(0, 0) // 设置图片偏移   
                        });
                        // 创建标注对象并添加到地图  
                        var marker = new BMapGL.Marker(point, {
                            icon: myIcon
                        });
                        that.map.addOverlay(marker);
                        marker.customData = jsonData[i];
                        marker.addEventListener("click", function (e) {
                            e.domEvent.stopPropagation(); //阻止事件冒泡，避免其他点击事件继续触发。
                            console.log(e.target.customData);
                            if (that.ykDetail != e.target.customData) {
                                that.ykDetail = e.target.customData;
                                that.showJkDetail();

                                //地图中心点移动处理
                                if (!($("#jkright1").hasClass('slip_right_in_animation'))) {
                                    // let lng = that.map.getCenter().lng;
                                    // let lat = that.map.getCenter().lat;
                                    // let zoom = that.map.getZoom();

                                    let lng = that.initMapCenter[0];
                                    let lat = that.initMapCenter[1];

                                    let new_lng = lng + 0.08;
                                    let new_lat = lat;
                                    var new_point = new BMapGL.Point(new_lng, new_lat); // 创建点坐标 
                                    // that.map.centerAndZoom(point, zoom); // 初始化地图，设置中心点坐标和地图级别

                                    setTimeout(function () {
                                        that.map.panTo(new_point, {
                                            noAnimation: false
                                        });
                                    }, 1000);
                                }
                            }
                        });

                        that.markers.push(marker);
                    }
                },
                getJkList() {
                    let that = this;
                    let params = {

                    };
                    webApi('/sn/getCameraDetil', 'get', params, function (data) {
                        if (data.code == 200) {
                            that.cameraList = data.data;
                            that.cityCameraData = data.data;
                            console.log(that.cityCameraData);
                            that.jkPoint();
                        } else {
                            console.log("监控列表接口错误：" + data.msg);
                            // that.$message({
                            //     showClose: true,
                            //     message: data.msg,
                            //     type: 'error',
                            //     duration: 10000,
                            //     center: true
                            // });
                        }
                    }, function (xhr, type, errorThrown) {});
                },
                getTongJiData() {
                    let that = this;
                    let params = {

                    };
                    webApi('/sn/getCityCount', 'get', params, function (data) {
                        if (data.code == 200) {
                            that.CityCount = data.data;
                            var yjnum = null;
                            if (that.CityCount.tdData) {
                                for (var i = 0; i < that.CityCount.tdData.length; i++) {
                                    if (that.CityCount.tdData[i].city == "西山") {
                                        yjnum = that.CityCount.tdData[i].num;
                                        break;
                                    }
                                }
                            }
                            var jknum = null;
                            if (that.CityCount.cameraData) {
                                for (var i = 0; i < that.CityCount.cameraData.length; i++) {
                                    if (that.CityCount.cameraData[i].county == "西山") {
                                        jknum = that.CityCount.cameraData[i].num;
                                        break;
                                    }
                                }
                            }
                            that.tongjiData.yjsum = yjnum;
                            that.tongjiData.jksum = jknum;

                        } else {
                            console.log("停电及监控总量统计接口错误：" + data.msg);
                            // that.$message({
                            //     showClose: true,
                            //     message: data.msg,
                            //     type: 'error',
                            //     duration: 10000,
                            //     center: true
                            // });
                        }
                    }, function (xhr, type, errorThrown) {});
                },
                getTdyjRecord(qx) {
                    let that = this;
                    let params = {};
                    webApi('/sn/getCityCount/' + qx, 'get', params, function (data) {
                        if (data.code == 200) {
                            for (var i = 0; i < data.data.length; i++) {
                                if (data.data[i].flag == '是') {
                                    //停电预警记录
                                    that.tdyjRecord.push(data.data[i]);

                                    //地图显示的预警点位
                                    that.byqYjPoints.push(data.data[i]);
                                } else {
                                    //地图显示的正常变压器点位
                                    that.byqZcPoints.push(data.data[i]);
                                }
                            }

                            that.yjLayer();
                        } else {
                            console.log("停电预警记录接口错误：" + data.msg);
                            // that.$message({
                            //     showClose: true,
                            //     message: data.msg,
                            //     type: 'error',
                            //     duration: 10000,
                            //     center: true
                            // });
                        }
                    }, function (xhr, type, errorThrown) {});
                },
                getTdsc(qx) {
                    let that = this;
                    let params = {};
                    webApi('/sn/getTDSC/' + qx, 'get', params, function (data) {
                        if (data.code == 200) {
                            // var tdscData = data.data;
                            // var yAxisData = [];
                            // var seriesData = [];
                            // for (var i = 0; i < tdscData.length; i++) {
                            //     yAxisData.push(tdscData[i].qx);
                            //     seriesData.push(tdscData[i].tdsc);
                            // }
                            // that.jztdOption.yAxis.data = yAxisData;
                            // that.jztdOption.series[0].data = seriesData;

                            // // 使用刚指定的配置项和数据显示图表。
                            // that.jztdChart.setOption(that.jztdOption);
                        } else {
                            console.log("停电情况统计接口错误：" + data.msg);
                            // that.$message({
                            //     showClose: true,
                            //     message: data.msg,
                            //     type: 'error',
                            //     duration: 10000,
                            //     center: true
                            // });
                        }
                    }, function (xhr, type, errorThrown) {});
                },
                getTdscfx(qx) {
                    let that = this;
                    let params = {};
                    webApi('/sn/getTDQJCount/' + qx, 'get', params, function (data) {
                        if (data.code == 200) {
                            var tdscfxData = data.data;
                            var seriesData = [];
                            for (var i = 0; i < tdscfxData.length; i++) {
                                seriesData.push({
                                    "name": tdscfxData[i].lab,
                                    "value": tdscfxData[i].num,
                                    itemStyle: {
                                        normal: {
                                            borderWidth: 5,
                                            shadowBlur: 20,
                                            borderColor: that.tdscfxOption.color[i],
                                            shadowColor: that.tdscfxOption.color[i]
                                        }
                                    }
                                });
                            }
                            that.tdscfxOption.series[0].data = seriesData;

                            // 使用刚指定的配置项和数据显示图表。
                            that.tdscfxChart.setOption(that.tdscfxOption);
                        } else {
                            console.log("停电时长分析接口错误：" + data.msg);
                            // that.$message({
                            //     showClose: true,
                            //     message: data.msg,
                            //     type: 'error',
                            //     duration: 10000,
                            //     center: true
                            // });
                        }
                    }, function (xhr, type, errorThrown) {});
                },
                getLstdtj() {
                    let that = this;
                    let params = {};
                    webApi('/sn/getHisTDData', 'get', params, function (data) {
                        if (data.code == 200) {
                            var lstdtjData = data.data;
                            var xAxisData = [];
                            var seriesData = [];
                            for (var i = 0; i < lstdtjData.length; i++) {
                                xAxisData.push(lstdtjData[i].timecd);
                                seriesData.push(lstdtjData[i].num);
                            }
                            that.lstdtjOption.xAxis.data = xAxisData;
                            that.lstdtjOption.series[0].data = seriesData;

                            // 使用刚指定的配置项和数据显示图表。
                            that.lstdtjChart.setOption(that.lstdtjOption);
                        } else {
                            console.log("历史停电统计接口错误：" + data.msg);
                            // that.$message({
                            //     showClose: true,
                            //     message: data.msg,
                            //     type: 'error',
                            //     duration: 10000,
                            //     center: true
                            // });
                        }
                    }, function (xhr, type, errorThrown) {});
                },
                getPqtdsl() {
                    let that = this;
                    let params = {};
                    webApi('/sn/getPQTDData', 'get', params, function (data) {
                        if (data.code == 200) {
                            that.tdqkData = [];
                            for (var i = 0; i < data.data.length; i++) {
                                that.tdqkData.push({
                                    order: i + 1,
                                    name: data.data[i].pq,
                                    value: data.data[i].num,
                                    percent: data.data[i].zb
                                });
                            }
                        } else {
                            console.log("片区停电数量接口错误：" + data.msg);
                            // that.$message({
                            //     showClose: true,
                            //     message: data.msg,
                            //     type: 'error',
                            //     duration: 10000,
                            //     center: true
                            // });
                        }
                    }, function (xhr, type, errorThrown) {});
                },
                showCommon() {
                    this.buttonText="隐藏指标";

                    let that = this;
                    if (!($("#left1").hasClass('slip_left_in_animation'))) {
                        if (oWebControl != null) {
                            oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
                            oWebControl.JS_Disconnect().then(function () {}, function () {});
                            that.ykDetail = null;
                        }

                        //各板块延迟滑入、滑出
                        $("#yjleft1").removeClass("slip_left_in_animation").addClass("slip_left_out_animation");
                        setTimeout(function () {
                            $("#yjleft1").hide();
                        }, 1000);

                        $("#jkright1").removeClass("slip_right_in_animation").addClass(
                            "slip_right_out_animation");
                        setTimeout(function () {
                            $("#jkright1").hide();
                        }, 1000);

                        // setTimeout(function () {
                        //     $("#jkright2").removeClass("slip_right_in_animation").addClass(
                        //         "slip_right_out_animation");
                        //     setTimeout(function () {
                        //         $("#jkright2").hide();
                        //     }, 1000);
                        // }, 500);

                        setTimeout(function () {
                            $("#left1").show();
                            $("#left1").removeClass("slip_left_out_animation").addClass(
                                "slip_left_in_animation");
                        }, 500);

                        setTimeout(function () {
                            $("#left2").show();
                            $("#left2").removeClass("slip_left_out_animation").addClass(
                                "slip_left_in_animation");
                        }, 1000);

                        setTimeout(function () {
                            $("#right1").show();
                            $("#right1").removeClass("slip_right_out_animation").addClass(
                                "slip_right_in_animation");
                        }, 500);

                        setTimeout(function () {
                            $("#right2").show();
                            $("#right2").removeClass("slip_right_out_animation").addClass(
                                "slip_right_in_animation");
                            that.tdscfxChart.resize();
                        }, 1000);

                        setTimeout(function () {
                            $("#right3").show();
                            $("#right3").removeClass("slip_right_out_animation").addClass(
                                "slip_right_in_animation");
                            that.lstdtjChart.resize();
                        }, 1500);
                    }
                },
                showYjDetail() {
                    this.buttonText="隐藏指标";

                    let that = this;
                    if (!($("#yjleft1").hasClass('slip_left_in_animation'))) {
                        if (oWebControl != null) {
                            oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
                            oWebControl.JS_Disconnect().then(function () {}, function () {});
                            that.ykDetail = null;
                        }

                        //各板块延迟滑入、滑出
                        setTimeout(function () {
                            $("#yjleft1").show();
                            $("#yjleft1").removeClass("slip_left_out_animation").addClass(
                                "slip_left_in_animation");
                        }, 1000);

                        $("#jkright1").removeClass("slip_right_in_animation").addClass(
                            "slip_right_out_animation");
                        setTimeout(function () {
                            $("#jkright1").hide();
                        }, 1000);

                        // setTimeout(function () {
                        //     $("#jkright2").removeClass("slip_right_in_animation").addClass(
                        //         "slip_right_out_animation");
                        //     setTimeout(function () {
                        //         $("#jkright2").hide();
                        //     }, 1000);
                        // }, 500);

                        $("#left1").removeClass("slip_left_in_animation").addClass("slip_left_out_animation");
                        setTimeout(function () {
                            $("#left1").hide();
                        }, 1000);

                        setTimeout(function () {
                            $("#left2").removeClass("slip_left_in_animation").addClass(
                                "slip_left_out_animation");
                            setTimeout(function () {
                                $("#left2").hide();
                            }, 1000);
                        }, 500);

                        $("#right1").removeClass("slip_right_in_animation").addClass(
                            "slip_right_out_animation");
                        setTimeout(function () {
                            $("#right1").hide();
                        }, 1000);

                        setTimeout(function () {
                            $("#right2").removeClass("slip_right_in_animation").addClass(
                                "slip_right_out_animation");
                            setTimeout(function () {
                                $("#right2").hide();
                            }, 1000);
                        }, 500);

                        setTimeout(function () {
                            $("#right3").removeClass("slip_right_in_animation").addClass(
                                "slip_right_out_animation");
                            setTimeout(function () {
                                $("#right3").hide();
                            }, 1000);
                        }, 1000);
                    }
                },
                showJkDetail() {
                    this.buttonText="隐藏指标";

                    let that = this;
                    if ($("#jkright1").hasClass('slip_right_in_animation')) {
                        let code = that.ykDetail.code;
                        that.doCameraPlay(code);
                    } else {
                        //当前页面嵌入其他页面时，监控播放窗口位置有异常，所以做以下处理：
                        //有父页面时，获取父页面距离浏览器顶部和左侧的距离，然后对视频位置div做位置偏移处理
                        var parentIframeTop = 0;
                        var parentIframeLeft = 0;
                        if (window.parent != window.self) {
                            parentIframeTop = window.parent.iframeTop();
                            parentIframeLeft = window.parent.iframeLeft();
                        }

                        $("#jkDetail").css("padding-left", parentIframeLeft + "px");
                        $("#jkDetail").css("padding-top", parentIframeTop + "px");

                        //各板块延迟滑入、滑出
                        $("#yjleft1").removeClass("slip_left_in_animation").addClass(
                            "slip_left_out_animation");
                        setTimeout(function () {
                            $("#yjleft1").hide();
                        }, 1000);

                        setTimeout(function () {
                            $("#jkright1").show();
                            $("#jkright1").removeClass("slip_right_out_animation").addClass(
                                "slip_right_in_animation");
                            setTimeout(function () {
                                let code = that.ykDetail.code;
                                playWndWidth = $("#jk-container").width();
                                playWndHeight = $("#jk-container").height();
                                console.log(playWndWidth + ',' + playWndHeight);

                                that.doCameraPlay(code);
                            }, 1000);
                        }, 500);

                        // setTimeout(function () {
                        //     $("#jkright2").show();
                        //     $("#jkright2").removeClass("slip_right_out_animation").addClass(
                        //         "slip_right_in_animation");
                        // }, 1000);

                        $("#left1").removeClass("slip_left_in_animation").addClass(
                            "slip_left_out_animation");
                        setTimeout(function () {
                            $("#left1").hide();
                        }, 1000);

                        setTimeout(function () {
                            $("#left2").removeClass("slip_left_in_animation").addClass(
                                "slip_left_out_animation");
                            setTimeout(function () {
                                $("#left2").hide();
                            }, 1000);
                        }, 500);

                        $("#right1").removeClass("slip_right_in_animation").addClass(
                            "slip_right_out_animation");
                        setTimeout(function () {
                            $("#right1").hide();
                        }, 1000);

                        setTimeout(function () {
                            $("#right2").removeClass("slip_right_in_animation").addClass(
                                "slip_right_out_animation");
                            setTimeout(function () {
                                $("#right2").hide();
                            }, 1000);
                        }, 500);

                        setTimeout(function () {
                            $("#right3").removeClass("slip_right_in_animation").addClass(
                                "slip_right_out_animation");
                            setTimeout(function () {
                                $("#right3").hide();
                            }, 1000);
                        }, 1000);
                    }
                },
                hideCommon() {
                    let that = this;
                    if (($("#left1").hasClass('slip_left_in_animation'))) {
                        $("#left1").removeClass("slip_left_in_animation").addClass("slip_left_out_animation");
                        setTimeout(function () {
                            $("#left1").hide();
                        }, 1000);

                        setTimeout(function () {
                            $("#left2").removeClass("slip_left_in_animation").addClass(
                                "slip_left_out_animation");
                            setTimeout(function () {
                                $("#left2").hide();
                            }, 1000);
                        }, 500);

                        $("#right1").removeClass("slip_right_in_animation").addClass(
                            "slip_right_out_animation");
                        setTimeout(function () {
                            $("#right1").hide();
                        }, 1000);

                        setTimeout(function () {
                            $("#right2").removeClass("slip_right_in_animation").addClass(
                                "slip_right_out_animation");
                            setTimeout(function () {
                                $("#right2").hide();
                            }, 1000);
                        }, 500);

                        setTimeout(function () {
                            $("#right3").removeClass("slip_right_in_animation").addClass(
                                "slip_right_out_animation");
                            setTimeout(function () {
                                $("#right3").hide();
                            }, 1000);
                        }, 1000);
                    }
                    if ($("#jkright1").hasClass('slip_right_in_animation')) {
                        if (oWebControl != null) {
                            oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
                            oWebControl.JS_Disconnect().then(function () {}, function () {});
                            that.ykDetail = null;
                        }

                        $("#jkright1").removeClass("slip_right_in_animation").addClass(
                            "slip_right_out_animation");
                        setTimeout(function () {
                            $("#jkright1").hide();
                        }, 1000);

                        var new_point = new BMapGL.Point(that.initMapCenter[0], that
                            .initMapCenter[1]); // 创建点坐标 
                        // that.map.centerAndZoom(point, zoom); // 初始化地图，设置中心点坐标和地图级别

                        setTimeout(function () {
                            that.map.panTo(new_point, {
                                noAnimation: false
                            });
                        }, 1000);
                    }
                    if ($("#yjleft1").hasClass('slip_right_in_animation')) {
                        $("#yjleft1").removeClass("slip_left_in_animation").addClass(
                            "slip_left_out_animation");
                        setTimeout(function () {
                            $("#yjleft1").hide();
                        }, 1000);

                        var new_point = new BMapGL.Point(that.initMapCenter[0], that
                            .initMapCenter[1]); // 创建点坐标 
                        // that.map.centerAndZoom(point, zoom); // 初始化地图，设置中心点坐标和地图级别

                        setTimeout(function () {
                            that.map.panTo(new_point, {
                                noAnimation: false
                            });
                        }, 1000);
                    }
                },
                showOrHide(){
                    if(this.buttonText=="显示指标"){
                        this.showCommon();
                        this.defaultShow=true;
                        this.buttonText="隐藏指标";
                    }else{
                        this.hideCommon();
                        this.defaultShow=false;
                        this.buttonText="显示指标";
                    }
                }
            }
        }

        let vue = Vue.extend(main);
        new vue().$mount('#app');
    }
</script>

</html>